feat: support code highlight with line number

tomowang · Dec 20, 2023 · df6ac6d · df6ac6d
1 parent fde0789
commit df6ac6d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 21 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -12,16 +12,9 @@
   stroke: white;
 }
 
-.highlight {
-  position: relative;
-}
-
-.highlight .icon-tabler.icon-tabler-check {
-  stroke: rgb(74 222 128);
-  /* tailwindcss green-400 */
-}
-
-/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
+/*
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+*/
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -2619,6 +2612,44 @@ video {
 .dark /* TextWhitespace */ .chroma .w {
 }
 
+.highlight {
+  position: relative;
+}
+
+.highlight .icon-tabler.icon-tabler-check {
+  stroke: rgb(74 222 128);
+  /* tailwindcss green-400 */
+}
+
+/* fix highlight with line number */
+
+.highlight .chroma .lntable {
+  margin: 1.7142857em 0;
+  padding: 0.8571429em 1.1428571em;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.highlight .chroma .lntable pre {
+  margin: 0;
+  padding: 0.8571429em 0;
+  border-radius: 0;
+}
+
+/* https://caniuse.com/css-has */
+
+.highlight .chroma:has(table) {
+  background-color: transparent;
+}
+
+.highlight .lntable tr {
+  display: flex;
+}
+
+.highlight .lntable tr .lntd:last-child {
+  flex-grow: 1;
+}
+
 :is(.dark .dark\:prose-invert) {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -10,14 +10,6 @@
   stroke: white;
 }
 
-.highlight {
-  position: relative;
-}
-
-.highlight .icon-tabler.icon-tabler-check {
-  stroke: rgb(74 222 128); /* tailwindcss green-400 */
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -200,3 +192,39 @@
 .dark /* GenericTraceback */ .chroma .gt {  }
 .dark /* GenericUnderline */ .chroma .gl {  }
 .dark /* TextWhitespace */ .chroma .w {  }
+
+
+.highlight {
+  position: relative;
+}
+
+.highlight .icon-tabler.icon-tabler-check {
+  stroke: rgb(74 222 128); /* tailwindcss green-400 */
+}
+
+/* fix highlight with line number */
+.highlight .chroma .lntable {
+  margin: 1.7142857em 0;
+  padding: 0.8571429em 1.1428571em;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.highlight .chroma .lntable pre {
+  margin: 0;
+  padding: 0.8571429em 0;
+  border-radius: 0;
+}
+
+/* https://caniuse.com/css-has */
+.highlight .chroma:has(table) {
+  background-color: transparent;
+}
+
+.highlight .lntable tr {
+  display: flex;
+}
+
+.highlight .lntable tr .lntd:last-child {
+  flex-grow: 1;
+}
diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js
@@ -19,7 +19,10 @@
   document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
 
   async function copyCodeToClipboard(button, highlightDiv) {
-    const codeToCopy = highlightDiv.querySelector("code").textContent;
+    let codeToCopy = highlightDiv.querySelector("code").textContent;
+    if (highlightDiv.querySelector("table")) { // code with line number
+      codeToCopy = highlightDiv.querySelector("td:last-child code").textContent;
+    }
     try {
       var result = await navigator.permissions.query({ name: "clipboard-write" });
       if (result.state == "granted" || result.state == "prompt") {

diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
@@ -18,7 +18,7 @@ enableEmoji = true
 
 [markup]
 [markup.highlight]
-  # lineNos = true // this has css issue when using class
+  # lineNos = true
   noClasses = false
 [markup.goldmark]
   [markup.goldmark.renderer]

diff --git a/exampleSite/content/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md
@@ -73,7 +73,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 
 ### Code block with backticks
 
-```html
+```html {linenos=true}
 <!doctype html>
 <html lang="en">
 <head>