fix: add heading id to titles for enabling toc navigation (#12)

guqing · Feb 28, 2024 · 2d833dd · 2d833dd
1 parent 4b8e697
commit 2d833dd
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/console/package.json b/console/package.json
@@ -23,9 +23,11 @@
     "ink-mde": "^0.29.1",
     "rehype-highlight": "^7.0.0",
     "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-heading-id": "^1.0.1",
     "remark-images": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",

diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
diff --git a/console/src/lib/remark/index.ts b/console/src/lib/remark/index.ts
@@ -7,16 +7,20 @@ import remarkBreaks from "remark-breaks";
 import remarkImages from "remark-images";
 import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
+import slug from 'rehype-slug';
+import remarkHeadingId from 'remark-heading-id';
 
 export const renderToHtml = async (sourceCode: string): Promise<string> => {
   var file = await unified()
-    .use(remarkParse)
+    .use(remarkParse) // 解析 Markdown
     .use(remarkGfm)
     .use(remarkBreaks)
     .use(remarkImages)
-    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(remarkHeadingId)
+    .use(remarkRehype, { allowDangerousHtml: true }) // 将 Markdown AST 转换为 HTML AST
     .use(rehypeRaw)
-    .use(rehypeStringify)
+    .use(slug) // 为所有标题元素添加 ID
+    .use(rehypeStringify) // 将 HTML AST 转换为字符串形式的 HTML
     .use(rehypeHighlight)
     .process(sourceCode);
   return String(file);