for-humanity 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 0.10.0 — 2026-10-13
+
+- Add VitePress-style code notation through Shiki transformers: `// [!code highlight|error|warning|++|--]`, `// [!code word:name]`, meta `{2,4-6}` and a `line-numbers` meta that numbers lines with CSS counters.
+- Remove the `bad`/`good` code labels added in 0.9.0; mark the lines instead.
+- Draw tables and flowchart boxes with the same border color as code blocks.
+
+## 0.9.1 — 2026-10-13
+
+- Draw tables with an outer border and cell borders, box flowcharts with a border, and separate sections with a solid rule and 64px of space.
+- Tint the whole code block of a `bad` or `good` label instead of relying on the caption, so a label can carry its reason as a code comment.
+
 ## 0.9.0 — 2026-10-13
 
 - Add code labels: a fence meta of `bad` or `good` with an optional title renders the code block with a colored left stripe and a caption, keeping Shiki highlighting.

package/README.md

@@ -33,7 +33,7 @@ Write Markdown. Keep the context. Share a static site.
 Node.js 22 or later and pnpm. Install the CLI in your document project:
 
 ```sh
-pnpm add -D --save-exact for-humanity@0.9.0
+pnpm add -D --save-exact for-humanity@0.10.0
 mkdir docs
 ```
 
@@ -52,7 +52,7 @@ pnpm exec for-humanity preview docs
 
 If your Markdown files are in the project root, use `.` instead of `docs`. The root `README.md` becomes the home page; root `AGENTS.md` and `CLAUDE.md` stay out of the site.
 
-Version `0.9.0` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
+Version `0.10.0` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
 Cloudflare Pages can host the generated site. See [Deployment](https://github.com/minu-ha/for-humanity/blob/main/templates/document/deployment.md) for the build settings.
 Set an optional public root `url` in the site configuration to generate `robots.txt` and `sitemap.xml`; projects without a URL emit neither file. See [Crawling](https://github.com/minu-ha/for-humanity/blob/main/templates/document/crawling.md).
 
@@ -75,7 +75,7 @@ pnpm preview    # Preview the static site
 pnpm build:pages # Add Cloudflare Pages headers and a 404 page
 ```
 
-Changes pushed to `main` update the documentation site. A stable version tag such as `v0.9.0` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
+Changes pushed to `main` update the documentation site. A stable version tag such as `v0.10.0` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
 The npm README updates with each package release. See [Maintenance](https://github.com/minu-ha/for-humanity/blob/main/templates/document/maintenance.md#packaging-and-release) for the release steps.
 
 ## Make it yours

package/dist/cli.css

@@ -23,8 +23,8 @@
   }
   & h2 {
     margin: var(--app-space-section) 0 var(--app-space-stack);
-    padding-top: var(--app-space-block);
-    border-top: 1px dotted var(--app-color-border);
+    padding-top: var(--app-space-group);
+    border-top: 1px solid var(--app-color-border);
     color: var(--app-color-text-strong);
     font-size: var(--app-font-size-section);
     font-weight: var(--app-font-weight-strong);
@@ -138,13 +138,14 @@
   }
   & table {
     width: 100%;
+    border: 1px solid var(--app-color-border);
     border-collapse: collapse;
     font-size: var(--app-font-size-dense);
     font-variant-numeric: tabular-nums;
   }
   & th {
     padding: var(--app-space-inline) var(--app-space-stack);
-    border-bottom: 1px solid var(--app-color-border);
+    border: 1px solid var(--app-color-border);
     background: var(--app-color-code);
     color: var(--app-color-text-strong);
     font-weight: var(--app-font-weight-strong);
@@ -154,13 +155,10 @@
   }
   & td {
     padding: var(--app-space-inline) var(--app-space-stack);
-    border-bottom: 1px solid var(--app-color-border-soft);
+    border: 1px solid var(--app-color-border);
     text-align: left;
     vertical-align: top;
   }
-  & tbody tr:last-child td {
-    border-bottom: 0;
-  }
   & tbody tr:hover td {
     background: var(--app-color-accent-soft);
   }
@@ -169,28 +167,45 @@
     border: 0;
     border-top: 1px dotted var(--app-color-border);
   }
-  & .wg_prose__codeLabel {
-    margin: var(--app-space-block) 0;
-    border-left: 3px solid var(--app-color-bad);
+  & pre code .line {
+    display: inline-block;
+    width: calc(100% + 2 * var(--app-space-block));
+    margin: 0 calc(-1 * var(--app-space-block));
+    padding: 0 var(--app-space-block);
   }
-  & .wg_prose__codeLabel--good {
-    border-left-color: var(--app-color-good);
+  & pre code .line.highlighted {
+    background: var(--app-color-accent-soft);
   }
-  & .wg_prose__codeLabelTitle {
-    padding: var(--app-space-inline) var(--app-space-block);
+  & pre code .line.highlighted.error {
     background: var(--app-color-bad-soft);
-    color: var(--app-color-bad);
-    font-size: var(--app-font-size-dense);
-    font-weight: var(--app-font-weight-strong);
   }
-  & .wg_prose__codeLabel--good .wg_prose__codeLabelTitle {
+  & pre code .line.highlighted.warning {
+    background: var(--app-color-warn-soft);
+  }
+  & pre code .line.diff.add {
     background: var(--app-color-good-soft);
-    color: var(--app-color-good);
   }
-  & .wg_prose__codeLabel pre {
-    margin: 0;
-    border-left: 0;
-    border-radius: 0 var(--app-radius-box) var(--app-radius-box) 0;
+  & pre code .line.diff.remove {
+    background: var(--app-color-bad-soft);
+    opacity: 0.8;
+  }
+  & pre code .highlighted-word {
+    padding: 0 2px;
+    border-radius: var(--app-radius-inline);
+    background: var(--app-color-accent-soft);
+  }
+  & pre.wg_prose__lineNumbers code {
+    counter-reset: line;
+  }
+  & pre.wg_prose__lineNumbers code .line::before {
+    display: inline-block;
+    width: 2em;
+    margin-right: var(--app-space-stack);
+    color: var(--app-color-text-muted);
+    text-align: right;
+    content: counter(line);
+    counter-increment: line;
+    user-select: none;
   }
 }
 .wg_prose__head {
@@ -272,7 +287,9 @@
 .wg_prose__flow {
   overflow-x: auto;
   margin: var(--app-space-block) 0;
-  padding: var(--app-space-block) 0;
+  padding: var(--app-space-block);
+  border: 1px solid var(--app-color-border);
+  border-radius: var(--app-radius-box);
   letter-spacing: 0;
   & svg {
     display: block;
@@ -762,9 +779,11 @@
   --app-color-accent: light-dark(#555, #b5b5b5);
   --app-color-accent-soft: light-dark(#f5f5f2, #222);
   --app-color-bad: light-dark(#b2412e, #ff9b8a);
-  --app-color-bad-soft: light-dark(#fbeeec, #3a2522);
+  --app-color-bad-soft: light-dark(#fbe9e6, #42241f);
   --app-color-good: light-dark(#2f7a47, #8bd3a3);
-  --app-color-good-soft: light-dark(#eaf5ee, #1f3327);
+  --app-color-good-soft: light-dark(#e3f3e8, #1f3a27);
+  --app-color-warn: light-dark(#8a6400, #e6c46a);
+  --app-color-warn-soft: light-dark(#fbf3d9, #3d3418);
   --app-color-link: light-dark(#11a, #9db8ff);
   --app-color-link-visited: light-dark(#51a, #c5a5ed);
   --app-color-link-hover: light-dark(#44d, #c1d1ff);
@@ -804,7 +823,7 @@
   --app-space-block: 14px;
   --app-space-group: 20px;
   --app-space-subsection: 28px;
-  --app-space-section: 44px;
+  --app-space-section: 64px;
   --app-space-tree-row: 0px;
   --app-space-tree-group: 16px;
   --app-space-tree-label: 2px;

package/dist/cli.js

@@ -1231,33 +1231,8 @@ var remarkBlocks = () => (tree, file) => {
   });
 };
 
-// src/component/widget/prose/_function/remark-code-labels.ts
-import { visit as visit3 } from "unist-util-visit";
-var code_label_pattern = /^(bad|good)(?:\s+(.+?))?\s*$/;
-var inserted_node_count = 3;
-var escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-var remarkCodeLabels = () => (tree) => {
-  visit3(tree, "code", (node, index, parent) => {
-    if (typeof node.meta !== "string" || parent === void 0 || index === void 0) {
-      return;
-    }
-    const match = code_label_pattern.exec(node.meta);
-    if (match === null) {
-      return;
-    }
-    const [, tone, title] = match;
-    const caption = title === void 0 ? "" : `<figcaption class="wg_prose__codeLabelTitle">${escapeHtml(title)}</figcaption>`;
-    node.meta = null;
-    parent.children.splice(index, 1, { type: "html", value: `<figure class="wg_prose__codeLabel wg_prose__codeLabel--${tone}">${caption}` }, node, {
-      type: "html",
-      value: "</figure>"
-    });
-    return index + inserted_node_count;
-  });
-};
-
 // src/component/widget/prose/_function/remark-flow.ts
-import { visit as visit4 } from "unist-util-visit";
+import { visit as visit3 } from "unist-util-visit";
 
 // src/util/mermaid/render-flow.js
 import { renderMermaidASCII } from "beautiful-mermaid";
@@ -1571,7 +1546,7 @@ var renderFlow = (source) => gridToSvg(renderMermaidASCII(widenCjk(source), ASCI
 
 // src/component/widget/prose/_function/remark-flow.ts
 var remarkFlow = () => (tree, file) => {
-  visit4(tree, "code", (node, index, parent) => {
+  visit3(tree, "code", (node, index, parent) => {
     if (node.lang !== "mermaid" || parent === void 0 || index === void 0) {
       return;
     }
@@ -1589,10 +1564,10 @@ var remarkFlow = () => (tree, file) => {
 // src/component/widget/prose/_function/remark-links.ts
 import { existsSync } from "node:fs";
 import { dirname, posix, relative, resolve } from "node:path";
-import { visit as visit5 } from "unist-util-visit";
+import { visit as visit4 } from "unist-util-visit";
 var remarkLinks = (options) => (tree, file) => {
   const here = dirname(relative(options.root, file.path));
-  visit5(tree, (node) => {
+  visit4(tree, (node) => {
     if (node.type !== "link" && node.type !== "definition") {
       return;
     }
@@ -1626,7 +1601,7 @@ var remarkParts = () => (tree) => {
 };
 
 // src/component/widget/prose/_function/remark-status.ts
-import { escape as escapeHtml2, escapeRegExp } from "es-toolkit/string";
+import { escape as escapeHtml, escapeRegExp } from "es-toolkit/string";
 import { findAndReplace } from "mdast-util-find-and-replace";
 
 // src/component/widget/prose/_constant/status.ts
@@ -1652,7 +1627,7 @@ var remarkStatus = (options) => {
           }
           return {
             type: "html",
-            value: `<span class="wg_prose__pill wg_prose__pill--${item.kind}">${escapeHtml2(text)}</span>`
+            value: `<span class="wg_prose__pill wg_prose__pill--${item.kind}">${escapeHtml(text)}</span>`
           };
         }
       ],
@@ -1676,9 +1651,9 @@ var remarkStatus = (options) => {
 };
 
 // src/component/widget/prose/_function/remark-swatch.ts
-import { visit as visit6 } from "unist-util-visit";
+import { visit as visit5 } from "unist-util-visit";
 var remarkSwatch = () => (tree) => {
-  visit6(tree, "inlineCode", (node) => {
+  visit5(tree, "inlineCode", (node) => {
     if (/^#[0-9a-f]{3,8}$/i.test(node.value.trim())) {
       node.data = {
         hProperties: { className: ["wg_prose__color"], style: `--wg-prose-chip-color: ${node.value.trim()}` }
@@ -1688,9 +1663,9 @@ var remarkSwatch = () => (tree) => {
 };
 
 // src/component/widget/prose/_function/remark-unknown-directives.ts
-import { SKIP as SKIP2, visit as visit7 } from "unist-util-visit";
+import { SKIP as SKIP2, visit as visit6 } from "unist-util-visit";
 var remarkUnknownDirectives = () => (tree, file) => {
-  visit7(tree, (node, index, parent) => {
+  visit6(tree, (node, index, parent) => {
     if (node.type === "textDirective" && parent !== void 0 && index !== void 0) {
       parent.children[index] = {
         type: "text",
@@ -1707,7 +1682,7 @@ var remarkUnknownDirectives = () => (tree, file) => {
 // src/entry/cli/_function/create-processor/_rehype-assets.ts
 import { existsSync as existsSync2, realpathSync, statSync } from "node:fs";
 import { dirname as dirname2, extname as extname2, isAbsolute, relative as relative2, resolve as resolve2, sep } from "node:path";
-import { visit as visit8 } from "unist-util-visit";
+import { visit as visit7 } from "unist-util-visit";
 
 // src/util/file/to-asset-path.ts
 import { createHash } from "node:crypto";
@@ -1720,7 +1695,7 @@ var toAssetPath = (options) => {
 
 // src/entry/cli/_function/create-processor/_rehype-assets.ts
 var rehypeAssets = (options) => (tree, file) => {
-  visit8(tree, "element", (node) => {
+  visit7(tree, "element", (node) => {
     const property = node.tagName === "img" ? "src" : "href";
     const url = node.properties[property];
     if (node.tagName !== "img" && node.tagName !== "a" || typeof url !== "string" || /^(?:[a-z][a-z\d+.-]*:|\/|#)/i.test(url)) {
@@ -1760,11 +1735,11 @@ var rehypeAssets = (options) => (tree, file) => {
 // src/entry/cli/_function/create-processor/_rehype-heading-ids.ts
 import Slugger from "github-slugger";
 import { toString as toPlainText3 } from "hast-util-to-string";
-import { visit as visit9 } from "unist-util-visit";
+import { visit as visit8 } from "unist-util-visit";
 var rehypeHeadingIds = () => (tree, file) => {
   const slugger = new Slugger();
   const headings = [];
-  visit9(tree, "element", (node) => {
+  visit8(tree, "element", (node) => {
     const depth = /^h([1-6])$/.exec(node.tagName)?.[1];
     if (depth === void 0) {
       return;
@@ -1788,9 +1763,35 @@ var remarkReport = (options) => (_tree, file) => {
   }
 };
 
+// src/entry/cli/_function/create-processor/_shiki-transformers.ts
+import {
+  transformerMetaHighlight,
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight
+} from "@shikijs/transformers";
+var lineNumbers = {
+  name: "for-humanity:line-numbers",
+  pre(node) {
+    const meta = this.options.meta?.__raw;
+    if (typeof meta === "string" && /\bline-numbers\b/.test(meta)) {
+      this.addClassToHast(node, "wg_prose__lineNumbers");
+    }
+  }
+};
+var shikiTransformers = [
+  transformerNotationHighlight({ matchAlgorithm: "v3" }),
+  transformerNotationErrorLevel({ matchAlgorithm: "v3" }),
+  transformerNotationDiff({ matchAlgorithm: "v3" }),
+  transformerNotationWordHighlight({ matchAlgorithm: "v3" }),
+  transformerMetaHighlight(),
+  lineNumbers
+];
+
 // src/entry/cli/_function/create-processor/create-processor.ts
 var createProcessor = (options) => {
-  return unified().use(remarkParse).use(remarkFrontmatter, ["yaml"]).use(remarkGfm).use(remarkSmartypants).use(remarkDirective).use(remarkBlocks).use(remarkParts).use(remarkFlow).use(remarkCodeLabels).use(remarkStatus, { status: options.site.status }).use(remarkSwatch).use(remarkLinks, { root: options.root }).use(remarkUnknownDirectives).use(remarkReport, { root: options.root }).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeShiki, { theme: createCssVariablesTheme({ name: "for-humanity", variablePrefix: "--app-code-" }) }).use(rehypeHead).use(rehypeHeadingIds).use(rehypeSections).use(rehypeTables).use(rehypeRaw).use(rehypeAssets, { root: options.root, files: options.files ?? /* @__PURE__ */ new Map() }).use(rehypeStringify, { allowDangerousHtml: true });
+  return unified().use(remarkParse).use(remarkFrontmatter, ["yaml"]).use(remarkGfm).use(remarkSmartypants).use(remarkDirective).use(remarkBlocks).use(remarkParts).use(remarkFlow).use(remarkStatus, { status: options.site.status }).use(remarkSwatch).use(remarkLinks, { root: options.root }).use(remarkUnknownDirectives).use(remarkReport, { root: options.root }).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeShiki, { theme: createCssVariablesTheme({ name: "for-humanity", variablePrefix: "--app-code-" }), transformers: shikiTransformers }).use(rehypeHead).use(rehypeHeadingIds).use(rehypeSections).use(rehypeTables).use(rehypeRaw).use(rehypeAssets, { root: options.root, files: options.files ?? /* @__PURE__ */ new Map() }).use(rehypeStringify, { allowDangerousHtml: true });
 };
 
 // src/entry/cli/_function/read-docs.ts

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "for-humanity",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "description": "Documents written for humans to read: a docs kit with a sidebar, parts, sections and flowcharts, built on Hono JSX",
     "keywords": [
         "docs",
@@ -51,6 +51,7 @@
     "dependencies": {
         "@hono/node-server": "^2.1.3",
         "@shikijs/rehype": "^4.4.3",
+        "@shikijs/transformers": "4.4.3",
         "beautiful-mermaid": "^1.1.3",
         "clsx": "^2.1.1",
         "es-toolkit": "^1.52.0",

package/src/component/widget/prose/wg-prose.css

@@ -34,8 +34,8 @@
 
     & h2 {
         margin: var(--app-space-section) 0 var(--app-space-stack);
-        padding-top: var(--app-space-block);
-        border-top: 1px dotted var(--app-color-border);
+        padding-top: var(--app-space-group);
+        border-top: 1px solid var(--app-color-border);
         color: var(--app-color-text-strong);
         font-size: var(--app-font-size-section);
         font-weight: var(--app-font-weight-strong);
@@ -176,8 +176,10 @@
         margin-bottom: 0;
     }
 
+    /* 표 · 코드 상자와 같은 선 색으로 바깥 선과 칸 선 · 머리 행은 바탕 */
     & table {
         width: 100%;
+        border: 1px solid var(--app-color-border);
         border-collapse: collapse;
         font-size: var(--app-font-size-dense);
         font-variant-numeric: tabular-nums;
@@ -185,7 +187,7 @@
 
     & th {
         padding: var(--app-space-inline) var(--app-space-stack);
-        border-bottom: 1px solid var(--app-color-border);
+        border: 1px solid var(--app-color-border);
         background: var(--app-color-code);
         color: var(--app-color-text-strong);
         font-weight: var(--app-font-weight-strong);
@@ -196,15 +198,11 @@
 
     & td {
         padding: var(--app-space-inline) var(--app-space-stack);
-        border-bottom: 1px solid var(--app-color-border-soft);
+        border: 1px solid var(--app-color-border);
         text-align: left;
         vertical-align: top;
     }
 
-    & tbody tr:last-child td {
-        border-bottom: 0;
-    }
-
     /* 표의 읽는 행 표시 */
     & tbody tr:hover td {
         background: var(--app-color-accent-soft);
@@ -216,34 +214,59 @@
         border-top: 1px dotted var(--app-color-border);
     }
 
-    /* 라벨 코드 · 왼쪽 띠와 제목 · 코드 상자의 여백은 figure 가 맡음 · 토큰은 token.css 의 bad·good */
-    & .wg_prose__codeLabel {
-        margin: var(--app-space-block) 0;
-        border-left: 3px solid var(--app-color-bad);
+    /* stylelint-disable selector-class-pattern -- Shiki 가 만드는 line·highlighted·diff 클래스 */
+
+    /* 코드 줄 · 바탕을 상자 가로 전체로 · 표기 없는 줄은 보이는 차이 없음 */
+    & pre code .line {
+        display: inline-block;
+        width: calc(100% + 2 * var(--app-space-block));
+        margin: 0 calc(-1 * var(--app-space-block));
+        padding: 0 var(--app-space-block);
     }
 
-    & .wg_prose__codeLabel--good {
-        border-left-color: var(--app-color-good);
+    & pre code .line.highlighted {
+        background: var(--app-color-accent-soft);
     }
 
-    & .wg_prose__codeLabelTitle {
-        padding: var(--app-space-inline) var(--app-space-block);
+    & pre code .line.highlighted.error {
         background: var(--app-color-bad-soft);
-        color: var(--app-color-bad);
-        font-size: var(--app-font-size-dense);
-        font-weight: var(--app-font-weight-strong);
     }
 
-    & .wg_prose__codeLabel--good .wg_prose__codeLabelTitle {
+    & pre code .line.highlighted.warning {
+        background: var(--app-color-warn-soft);
+    }
+
+    & pre code .line.diff.add {
         background: var(--app-color-good-soft);
-        color: var(--app-color-good);
     }
 
-    & .wg_prose__codeLabel pre {
-        margin: 0;
-        border-left: 0;
-        border-radius: 0 var(--app-radius-box) var(--app-radius-box) 0;
+    & pre code .line.diff.remove {
+        background: var(--app-color-bad-soft);
+        opacity: 0.8;
+    }
+
+    & pre code .highlighted-word {
+        padding: 0 2px;
+        border-radius: var(--app-radius-inline);
+        background: var(--app-color-accent-soft);
+    }
+
+    /* 줄 번호 · 펜스 메타 line-numbers · 복사에 섞이지 않게 content 로 */
+    & pre.wg_prose__lineNumbers code {
+        counter-reset: line;
+    }
+
+    & pre.wg_prose__lineNumbers code .line::before {
+        display: inline-block;
+        width: 2em;
+        margin-right: var(--app-space-stack);
+        color: var(--app-color-text-muted);
+        text-align: right;
+        content: counter(line);
+        counter-increment: line;
+        user-select: none;
     }
+    /* stylelint-enable selector-class-pattern */
     /* stylelint-enable selector-disallowed-list */
 }
 
@@ -354,7 +377,9 @@
 .wg_prose__flow {
     overflow-x: auto;
     margin: var(--app-space-block) 0;
-    padding: var(--app-space-block) 0;
+    padding: var(--app-space-block);
+    border: 1px solid var(--app-color-border);
+    border-radius: var(--app-radius-box);
 
     /* 라벨 위치는 자간 0의 격자로 계산 */
     letter-spacing: 0;

package/src/entry/cli/_function/create-processor/_shiki-transformers.ts

@@ -0,0 +1,34 @@
+import {
+    transformerMetaHighlight,
+    transformerNotationDiff,
+    transformerNotationErrorLevel,
+    transformerNotationHighlight,
+    transformerNotationWordHighlight,
+} from "@shikijs/transformers";
+import type {ShikiTransformer} from "shiki";
+
+/**
+ * 펜스 메타에 `line-numbers` 가 있으면 pre 에 줄 번호 클래스 · 번호는 CSS counter
+ */
+const lineNumbers: ShikiTransformer = {
+    name: "for-humanity:line-numbers",
+    pre(node) {
+        const meta = this.options.meta?.__raw;
+
+        if (typeof meta === "string" && /\bline-numbers\b/.test(meta)) {
+            this.addClassToHast(node, "wg_prose__lineNumbers");
+        }
+    },
+};
+
+/**
+ * 코드 줄 표기 · `// [!code highlight|error|warning|++|--]`, `// [!code word:x]`, 메타 `{2,4-6}`, `line-numbers`
+ */
+export const shikiTransformers: ShikiTransformer[] = [
+    transformerNotationHighlight({matchAlgorithm: "v3"}),
+    transformerNotationErrorLevel({matchAlgorithm: "v3"}),
+    transformerNotationDiff({matchAlgorithm: "v3"}),
+    transformerNotationWordHighlight({matchAlgorithm: "v3"}),
+    transformerMetaHighlight(),
+    lineNumbers,
+];

package/src/entry/cli/_function/create-processor/create-processor.ts

@@ -13,7 +13,6 @@ import {rehypeHead} from "@/component/widget/prose/_function/rehype-head";
 import {rehypeSections} from "@/component/widget/prose/_function/rehype-sections/rehype-sections";
 import {rehypeTables} from "@/component/widget/prose/_function/rehype-tables";
 import {remarkBlocks} from "@/component/widget/prose/_function/remark-blocks";
-import {remarkCodeLabels} from "@/component/widget/prose/_function/remark-code-labels";
 import {remarkFlow} from "@/component/widget/prose/_function/remark-flow";
 import {remarkLinks} from "@/component/widget/prose/_function/remark-links";
 import {remarkParts} from "@/component/widget/prose/_function/remark-parts";
@@ -23,10 +22,11 @@ import {remarkUnknownDirectives} from "@/component/widget/prose/_function/remark
 import {rehypeAssets} from "@/entry/cli/_function/create-processor/_rehype-assets";
 import {rehypeHeadingIds} from "@/entry/cli/_function/create-processor/_rehype-heading-ids";
 import {remarkReport} from "@/entry/cli/_function/create-processor/_remark-report";
+import {shikiTransformers} from "@/entry/cli/_function/create-processor/_shiki-transformers";
 import type {SiteConfig} from "@/type/site-config";
 
 /**
- * Markdown 처리 순서: remark(부품·흐름도·코드 라벨) → 코드 강조 → 머리 → 제목 id → 가름 수집 → 표
+ * Markdown 처리 순서: remark(부품·흐름도) → 코드 강조(줄 표기 transformer) → 머리 → 제목 id → 가름 수집 → 표
  * 플러그인 HTML 조각은 마지막 rehype-raw에서 해석
  * Shiki inline style: token.css의 --app-code-* 참조
  */
@@ -40,14 +40,13 @@ export const createProcessor = (options: {site: SiteConfig; root: string; files?
         .use(remarkBlocks)
         .use(remarkParts)
         .use(remarkFlow)
-        .use(remarkCodeLabels)
         .use(remarkStatus, {status: options.site.status})
         .use(remarkSwatch)
         .use(remarkLinks, {root: options.root})
         .use(remarkUnknownDirectives)
         .use(remarkReport, {root: options.root})
         .use(remarkRehype, {allowDangerousHtml: true})
-        .use(rehypeShiki, {theme: createCssVariablesTheme({name: "for-humanity", variablePrefix: "--app-code-"})})
+        .use(rehypeShiki, {theme: createCssVariablesTheme({name: "for-humanity", variablePrefix: "--app-code-"}), transformers: shikiTransformers})
         .use(rehypeHead)
         .use(rehypeHeadingIds)
         .use(rehypeSections)

package/src/entry/cli/cli.test.ts

@@ -73,25 +73,24 @@ test("site port defaults to 4321 and accepts only integers in the TCP range", ()
     }
 });
 
-test("code fences labelled bad or good render a captioned figure and keep highlighting", async () => {
-    const root = await mkdtemp(join(tmpdir(), "for-humanity-code-labels-"));
+test("code notation marks lines, meta highlights lines, and line-numbers tags the block", async () => {
+    const root = await mkdtemp(join(tmpdir(), "for-humanity-code-notation-"));
 
     try {
         await writeFile(
             join(root, "guide.md"),
-            "---\nname: Guide\nlabel: Guide\ngroup: Guide\n---\n\n## Read\n\n```ts bad 리터럴 <폴백>\nconst a = 1;\n```\n\n```ts good\nconst b = 2;\n```\n\n```ts other meta\nconst c = 3;\n```\n",
+            "---\nname: Guide\nlabel: Guide\ngroup: Guide\n---\n\n## Read\n\n```ts line-numbers\nconst a = 1; // [!code error]\nconst b = 2; // [!code ++]\nconst c = 3;\n```\n\n```txt\n# [!code highlight]\nfirst\nsecond\n```\n\n```css {2}\n.a {\n  color: red;\n}\n```\n",
         );
         const site = siteConfigSchema.parse({});
         const [doc] = await readDocs({root, processor: createProcessor({site, root})});
 
         assert.ok(doc);
-        assert.match(
-            doc.html,
-            /<figure class="wg_prose__codeLabel wg_prose__codeLabel--bad"><figcaption class="wg_prose__codeLabelTitle">리터럴 &#x3C;폴백><\/figcaption>\s*<pre class="shiki/,
-        );
-        assert.match(doc.html, /<figure class="wg_prose__codeLabel wg_prose__codeLabel--good">\s*<pre class="shiki/);
-        assert.equal(doc.html.split("<figure").length - 1, 2, "other meta stays a plain code block");
-        assert.equal(doc.html.split("</figure>").length - 1, 2);
+        assert.match(doc.html, /<pre class="[^"]*wg_prose__lineNumbers[^"]*"/);
+        assert.match(doc.html, /<span class="line highlighted error">/);
+        assert.match(doc.html, /<span class="line diff add">/);
+        assert.match(doc.html, /<span class="line highlighted">[^\n]*first/);
+        assert.equal(doc.html.includes("[!code"), false, "notation comments are removed from the output");
+        assert.equal(doc.html.split('<span class="line highlighted">').length - 1, 2, "a standalone txt notation line and the css {2} meta each highlight one line");
     } finally {
         await rm(root, {recursive: true, force: true});
     }

package/src/style/token.css

@@ -35,11 +35,13 @@
     --app-color-accent: light-dark(#555, #b5b5b5);
     --app-color-accent-soft: light-dark(#f5f5f2, #222);
 
-    /* 라벨 코드 · bad·good 띠와 제목 · soft 제목 바탕 */
+    /* 코드 줄 표기 · error·remove 는 bad, add 는 good, warning 은 warn · soft 가 줄 바탕 */
     --app-color-bad: light-dark(#b2412e, #ff9b8a);
-    --app-color-bad-soft: light-dark(#fbeeec, #3a2522);
+    --app-color-bad-soft: light-dark(#fbe9e6, #42241f);
     --app-color-good: light-dark(#2f7a47, #8bd3a3);
-    --app-color-good-soft: light-dark(#eaf5ee, #1f3327);
+    --app-color-good-soft: light-dark(#e3f3e8, #1f3a27);
+    --app-color-warn: light-dark(#8a6400, #e6c46a);
+    --app-color-warn-soft: light-dark(#fbf3d9, #3d3418);
 
     /* 링크 · 기본·방문·hover */
     --app-color-link: light-dark(#11a, #9db8ff);
@@ -97,7 +99,7 @@
     --app-space-block: 14px;
     --app-space-group: 20px;
     --app-space-subsection: 28px;
-    --app-space-section: 44px;
+    --app-space-section: 64px;
 
     /* 탐색 트리 · 항목 위아래 여백·묶음 사이·묶음 라벨 아래·중첩 들여쓰기 */
     --app-space-tree-row: 0px;

package/src/component/widget/prose/_function/remark-code-labels.ts

@@ -1,47 +0,0 @@
-import type {Root} from "mdast";
-import {visit} from "unist-util-visit";
-
-/**
- * 펜스 메타의 라벨 · `bad 제목`, `good 제목` · 제목은 선택
- */
-const code_label_pattern = /^(bad|good)(?:\s+(.+?))?\s*$/;
-
-/**
- * figure 여는 조각, 코드, 닫는 조각
- */
-const inserted_node_count = 3;
-
-/**
- * 제목을 HTML 문자열에 넣기 위한 escape
- */
-const escapeHtml = (text: string) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-
-/**
- * 코드 펜스 메타 `bad`·`good` → 색 띠와 제목이 붙은 figure · 다른 메타는 그대로 둠
- * 코드 노드는 유지해 Shiki 강조를 받고, figure 조각은 마지막 rehype-raw에서 합쳐짐
- */
-export const remarkCodeLabels = () => (tree: Root) => {
-    visit(tree, "code", (node, index, parent) => {
-        if (typeof node.meta !== "string" || parent === undefined || index === undefined) {
-            return;
-        }
-
-        const match = code_label_pattern.exec(node.meta);
-
-        if (match === null) {
-            return;
-        }
-
-        const [, tone, title] = match;
-        const caption = title === undefined ? "" : `<figcaption class="wg_prose__codeLabelTitle">${escapeHtml(title)}</figcaption>`;
-
-        node.meta = null;
-        parent.children.splice(index, 1, {type: "html", value: `<figure class="wg_prose__codeLabel wg_prose__codeLabel--${tone}">${caption}`}, node, {
-            type: "html",
-            value: "</figure>",
-        });
-
-        // 끼워 넣은 세 노드 다음부터 계속
-        return index + inserted_node_count;
-    });
-};