Add markdown-it-anchor and permalinks

ServiceStack · Feb 27, 2024 · 88a5c0d · 88a5c0d
1 parent 537c7f6
commit 88a5c0d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "autoprefixer": "^10.4.17",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.0.0",
+    "markdown-it-anchor": "^8.6.7",
     "markdown-it-container": "^4.0.0",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.35",

diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
@@ -72,6 +72,10 @@ code[class*=language-], pre[class*=language-] {
     background-color:#1f2937;
     min-width: fit-content;
 }
+.prose h1>a, .prose h2>a, .prose h3>a, .prose h4>a, .prose h5>a, .prose h6>a {
+    color: inherit;
+    text-decoration: none;
+}
 
 /* dark mode autocomplete fields */
 .dark input:-webkit-autofill,

diff --git a/vite.config.markdown.ts b/vite.config.markdown.ts
@@ -1,6 +1,7 @@
 import MarkdownIt from "markdown-it"
 import container from "markdown-it-container"
 import prism from "markdown-it-prism"
+import anchor from "markdown-it-anchor"
 import Prism from 'prismjs'
 
 const FencedComponents = ['files']
@@ -73,6 +74,7 @@ export default function(md:MarkdownIt, options: { fencedComponents?:string[] } =
     }
 
     md.linkify.set({ fuzzyLink: false })
+    md.use(anchor, {permalink: anchor.permalink.headerLink()})
     md.use(prism)
     md.use((md:any) => {
         const allComponents = [...(options.fencedComponents || []), ...FencedComponents]