Added anchor links

assets/styles.css

@@ -39,3 +39,12 @@ body::-webkit-scrollbar-track {
   border-radius: 3px;
   background: var(--scrollbar-color);
 }
+
+/* Style the Markdown heading links. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
+  color: var(--sl-color-white);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}

astro.config.js

@@ -1,5 +1,7 @@
+import { rehypeHeadingIds } from "@astrojs/markdown-remark"
 import starlight from "@astrojs/starlight"
 import { defineConfig } from "astro/config"
+import rehypeAutolinkHeadings from "rehype-autolink-headings"
 
 // https://astro.build/config
 export default defineConfig({
@@ -98,4 +100,16 @@ export default defineConfig({
       ],
     }),
   ],
+  markdown: {
+    rehypePlugins: [
+      rehypeHeadingIds,
+      [
+        rehypeAutolinkHeadings,
+        {
+          // Wrap the heading text in a link.
+          behavior: "wrap",
+        },
+      ],
+    ],
+  },
 })

package.json

@@ -17,6 +17,7 @@
     "test": "npm run lint"
   },
   "devDependencies": {
+    "@astrojs/markdown-remark": "^4.3.2",
     "@apidevtools/json-schema-ref-parser": "^11.5.4",
     "@astrojs/starlight": "^0.21.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -30,6 +31,7 @@
     "js-yaml": "^4.1.0",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
+    "rehype-autolink-headings": "^7.1.0",
     "typeface-hk-grotesk": "^1.0.0"
   }
 }