feat: Style code block even line is empty

2 files changed, 20 insertions, 2 deletions

diff --git a/src/css/index.css b/src/css/index.css
index 93a4918..0997779 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -64,7 +64,8 @@ body {
 }
 
 /* FIXME For those empty line (no child with cm-comment) */
-.CodeMirror-line:has(.cm-comment) {
+.inside-code-block,
+.CodeMirror-line:has(.cm-formatting-code-block) {
   background: rgba(0,0,0,.05) !important;
 
   .cm-comment {
diff --git a/src/editor.mjs b/src/editor.mjs
index 5470b64..d1b4ba1 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -89,10 +89,27 @@ if (queryParams.get('render')) {
   toggleMaps(HtmlContainer)
 }
 
+// Quick hack to style lines inside code block
+const addClassToCodeLines = () => {
+  const lines = cm.getLineHandle(0).parent.lines
+  let insideCodeBlock = false
+  lines.forEach((line, index) => {
+    if (line.text.match(/^````*/)) {
+      insideCodeBlock = !insideCodeBlock
+    } else if (insideCodeBlock) {
+      cm.addLineClass(index, "text", "inside-code-block")
+    } else {
+      cm.removeLineClass(index, "text", "inside-code-block")
+    }
+  })
+}
+addClassToCodeLines()
+
 // Re-render HTML by editor content
-cm.on("change", () => {
+cm.on("change", (_, obj) => {
   markdown2HTML(HtmlContainer, editor.value())
   createDocLinks(HtmlContainer)
+  addClassToCodeLines()
 })
 // }}}