wip: add background of fenced code block

nhn · Apr 20, 2020 · 518742c · 518742c
1 parent 1bc97a8
commit 518742c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/apps/editor/src/css/md-syntax-highlighting.css b/apps/editor/src/css/md-syntax-highlighting.css
@@ -81,6 +81,12 @@
   background-color: #f9f2f4;
 }
 
+.tui-md-code-block.CodeMirror-linebackground {
+  left: 20px;
+  right: 20px;
+  background-color: #f5f7f8;
+}
+
 .tui-md-code.tui-md-marked-text,
 .tui-md-code-block.tui-md-marked-text {
   font-family: Consolas, Courier, 'Apple SD 산돌고딕 Neo', -apple-system, 'Lucida Grande',

diff --git a/apps/editor/src/js/markdownEditor.js b/apps/editor/src/js/markdownEditor.js
@@ -373,6 +373,12 @@ class MarkdownEditor extends CodeMirrorExt {
     this._markText(closeDelimStart, end, 'tui-md-delimiter');
   }
 
+  _markCodeBlockLine(startLine, endLine) {
+    for (let index = startLine; index <= endLine; index += 1) {
+      this.cm.addLineClass(index, 'background', 'tui-md-code-block');
+    }
+  }
+
   _markCodeBlock(node, start, end) {
     const { fenceOffset, fenceLength, fenceChar, info } = node;
     const { line: startLine, ch: startCh } = start;
@@ -404,6 +410,7 @@ class MarkdownEditor extends CodeMirrorExt {
     }
 
     this._markText(openDelimEnd, closeDelimStart, 'tui-md-marked-text');
+    this._markCodeBlockLine(startLine, endLine);
   }
 
   _markTextInListItemChildren(node, className) {