feat: gfm heading id

package-lock.json

@@ -17,6 +17,7 @@
         "marked": "^17.0.3",
         "marked-alert": "^2.1.2",
         "marked-directive": "^1.0.7",
+        "marked-gfm-heading-id": "^4.1.3",
         "mermaid": "^11.0.0",
         "solid-element": "^1.9.1",
         "solid-js": "^1.9.3"
@@ -3569,6 +3570,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/github-slugger": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
+      "license": "ISC"
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -4054,6 +4061,18 @@
         "marked": ">=7.0.0"
       }
     },
+    "node_modules/marked-gfm-heading-id": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-4.1.3.tgz",
+      "integrity": "sha512-aR0i63LmFbuxU/gAgrgz1Ir+8HK6zAIFXMlckeKHpV+qKbYaOP95L4Ux5Gi+sKmCZU5qnN2rdKpvpb7PnUBIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "github-slugger": "^2.0.0"
+      },
+      "peerDependencies": {
+        "marked": ">=13 <18"
+      }
+    },
     "node_modules/mermaid": {
       "version": "11.12.3",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.12.3.tgz",

package.json

@@ -38,6 +38,7 @@
     "marked": "^17.0.3",
     "marked-alert": "^2.1.2",
     "marked-directive": "^1.0.7",
+    "marked-gfm-heading-id": "^4.1.3",
     "mermaid": "^11.0.0",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.3"

src/components/FileTree.tsx

@@ -87,11 +87,14 @@ export const HeadingNode: Component<{
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();
     navigate(href);
-    // 滚动到目标元素
+    // 滚动到目标元素，考虑导航栏高度偏移
     requestAnimationFrame(() => {
       const element = document.getElementById(anchor);
       if (element) {
-        element.scrollIntoView({ behavior: "smooth", block: "start" });
+        const navBarHeight = 80;
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = window.scrollY + elementPosition - navBarHeight;
+        window.scrollTo({ top: offsetPosition, behavior: "smooth" });
       }
     });
   };

src/markdown/index.ts

@@ -3,9 +3,11 @@ import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
 import yaml from 'js-yaml';
 import markedAlert from "marked-alert";
 import markedMermaid from "./mermaid";
+import {gfmHeadingId} from "marked-gfm-heading-id";
 
 // 使用 marked-directive 来支持指令语法
 const marked = new Marked()
+    .use(gfmHeadingId())
     .use(markedAlert())
     .use(markedMermaid())
     .use(createDirectives([