From f1f5462fadd410dbbb6c284481b6ca7219313e64 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Fri, 13 Sep 2024 18:52:01 +0800
Subject: feat: Style code block even line is empty

---
 src/css/index.css |  3 ++-
 src/editor.mjs    | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

(limited to 'src')

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()
 })
 // }}}
 
-- 
cgit v1.2.3-70-g09d2