Merge pull request #2656 from ZhenShuo2021/feat/codeblock-title

✨ Feat: support title in code block
2026-01-30 16:31:52 +01:00 · 2025-12-22 17:11:53 +00:00
parent d913a512ad 0e3bad2be7
commit b6c00249c6
9 changed files with 91 additions and 110 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3323,13 +3323,37 @@
  }
 }
@layer utilities {
-  .prose .chroma {
-    position: static;
+  .highlight-wrapper {
+    position: relative;
+    z-index: 0;
+    display: block;
+    overflow: hidden;
    border-radius: var(--radius-md);
-  }
-  .prose .highlight:not(:has(table)) .chroma, .prose .highlight > .chroma {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+  }
+  .highlight-wrapper pre, .highlight-wrapper table, .highlight-wrapper div {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .highlight-wrapper:has(.codeblock-title) pre {
+    border-radius: 0;
+  }
+  .codeblock-title {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: rgba(var(--color-neutral-200), 1);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    &:is(.dark *) {
+      border-color: rgba(var(--color-neutral-800), 1);
+    }
+    background-color: #fff;
+    &:is(.dark *) {
+      background-color: #0d1117;
+    }
  }
  .chroma .lntd, .chroma .lntd pre {
    margin: calc(var(--spacing) * 0);
@@ -4056,14 +4080,11 @@ button, [role="button"] {
    margin-right: calc(var(--spacing) * 0);
  }
 }
-.highlight-wrapper {
-  display: block;
-}
 .highlight {
  position: relative;
  z-index: 0;
 }
-.highlight:hover > .copy-button {
+.highlight-wrapper:hover > .copy-button {
  visibility: visible;
 }
 .copy-button {
--- a/assets/css/components/chroma.css
+++ b/assets/css/components/chroma.css
@@ -1,12 +1,24 @@
 /* -- Chroma Highlight -- */
-/* Background */
-.prose .chroma {
-  @apply static rounded-md;
+/* margins for codeblock title */
+.highlight-wrapper {
+  @apply block relative z-0 overflow-hidden shadow rounded-md;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
 }

-.prose .highlight:not(:has(table)) .chroma,
-.prose .highlight > .chroma {
-  @apply shadow;
+.highlight-wrapper pre,
+.highlight-wrapper table, .highlight-wrapper div {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.highlight-wrapper:has(.codeblock-title) pre {
+  @apply rounded-none;
+}
+
+.codeblock-title {
+  @apply px-4 py-2 border-b border-neutral-200 dark:border-neutral-800;
+  @apply bg-white dark:bg-[#0d1117];
 }

 /* LineTableTD */
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -95,15 +95,11 @@ button,
 }

 /* Code Copy */
-.highlight-wrapper {
-  @apply block;
-}
-
 .highlight {
  @apply relative z-0;
 }

-.highlight:hover > .copy-button {
+.highlight-wrapper:hover > .copy-button {
  @apply visible;
 }

--- a/assets/js/code.js
+++ b/assets/js/code.js
@@ -2,31 +2,26 @@ var scriptBundle = document.getElementById("script-bundle");
 var copyText = scriptBundle?.getAttribute("data-copy") || "Copy";
 var copiedText = scriptBundle?.getAttribute("data-copied") || "Copied";

-function createCopyButton(highlightDiv) {
+function createCopyButton(highlightWrapper) {
  const button = document.createElement("button");
  button.className = "copy-button";
  button.type = "button";
  button.ariaLabel = copyText;
  button.innerText = copyText;
-  button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
-
-  highlightDiv.insertBefore(button, highlightDiv.firstChild);
-  const wrapper = document.createElement("div");
-  wrapper.className = "highlight-wrapper";
-  highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
-  wrapper.appendChild(highlightDiv);
+  button.addEventListener("click", () => copyCodeToClipboard(button, highlightWrapper));
+  highlightWrapper.insertBefore(button, highlightWrapper.firstChild);
 }

-async function copyCodeToClipboard(button, highlightDiv) {
-  const codeToCopy = getCodeText(highlightDiv);
+async function copyCodeToClipboard(button, highlightWrapper) {
+  const codeToCopy = getCodeText(highlightWrapper);

-  function fallback(codeToCopy, highlightDiv) {
+  function fallback(codeToCopy, highlightWrapper) {
    const textArea = document.createElement("textArea");
    textArea.contentEditable = "true";
    textArea.readOnly = "false";
    textArea.className = "copy-textarea";
    textArea.value = codeToCopy;
-    highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
+    highlightWrapper.insertBefore(textArea, highlightWrapper.firstChild);
    const range = document.createRange();
    range.selectNodeContents(textArea);
    const sel = window.getSelection();
@@ -34,7 +29,7 @@ async function copyCodeToClipboard(button, highlightDiv) {
    sel.addRange(range);
    textArea.setSelectionRange(0, 999999);
    document.execCommand("copy");
-    highlightDiv.removeChild(textArea);
+    highlightWrapper.removeChild(textArea);
  }

  try {
@@ -42,10 +37,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
    if (result.state == "granted" || result.state == "prompt") {
      await navigator.clipboard.writeText(codeToCopy);
    } else {
-      fallback(codeToCopy, highlightDiv);
+      fallback(codeToCopy, highlightWrapper);
    }
  } catch (_) {
-    fallback(codeToCopy, highlightDiv);
+    fallback(codeToCopy, highlightWrapper);
  } finally {
    button.blur();
    button.innerText = copiedText;
@@ -55,7 +50,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
  }
 }

-function getCodeText(highlightDiv) {
+function getCodeText(highlightWrapper) {
+  const highlightDiv = highlightWrapper.querySelector(".highlight");
+  if (!highlightDiv) return "";
+
  const codeBlock = highlightDiv.querySelector("code");
  const inlineLines = codeBlock?.querySelectorAll(".cl"); // linenos=inline
  const tableCodeCell = highlightDiv?.querySelector(".lntable .lntd:last-child code"); // linenos=table
@@ -75,5 +73,5 @@ function getCodeText(highlightDiv) {
 }

 window.addEventListener("DOMContentLoaded", (event) => {
-  document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
+  document.querySelectorAll(".highlight-wrapper").forEach((highlightWrapper) => createCopyButton(highlightWrapper));
 });
--- a/exampleSite/content/samples/markdown/index.it.md
+++ b/exampleSite/content/samples/markdown/index.it.md
@@ -65,7 +65,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou

 ## Code Blocks

-### Code block with backticks
+### General code block

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```

-### Code block indented with four spaces
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### Code block with title and line highlight

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## List Types

--- a/exampleSite/content/samples/markdown/index.ja.md
+++ b/exampleSite/content/samples/markdown/index.ja.md
@@ -80,34 +80,20 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 </html>
 ```

-### 4スペースのインデントによるコードブロック
-
-    <!DOCTYPE html>
-    <html lang="ja">
-    <head>
-      <meta charset="utf-8">
-      <title>HTML5 資料の例</title>
-    </head>
-    <body>
-      <p>テスト</p>
-    </body>
-    </html>
-
-### Hugo 内のショートコード・ハイライトを利用したコードブロック
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### タイトルと行ハイライト機能付きのコードブロック

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
-<html lang="ja">
+<html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>HTML5 資料の例</title>
+  <title>Example HTML5 Document</title>
 </head>
 <body>
-  <p>テスト</p>
+  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## リスト形式

--- a/exampleSite/content/samples/markdown/index.md
+++ b/exampleSite/content/samples/markdown/index.md
@@ -65,7 +65,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou

 ## Code Blocks

-### Code block with backticks
+### General code block

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```

-### Code block indented with four spaces
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### Code block with title and line highlight

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## List Types

--- a/exampleSite/content/samples/markdown/index.zh-cn.md
+++ b/exampleSite/content/samples/markdown/index.zh-cn.md
@@ -65,7 +65,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap

 ## 代码块

-### 带反引号的代码块
+### 一般的代码块

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 </html>
 ```

-### 缩进四个空格的代码块
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### 带有 Hugo 内部高亮简码的代码块
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### 带有标题和行高亮的代码块

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## 列表

--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,10 @@
+{{- $title := or .Attributes.title "" -}}
+{{- $lang := or .Type "text" -}}
+<div class="highlight-wrapper">
+  {{- with $title -}}
+    <div class="codeblock-title">
+      {{- $title -}}
+    </div>
+  {{- end -}}
+  {{- transform.Highlight .Inner $lang .Options -}}
+</div>