Add rehype-slug and rehype-autolink-headings

astro.config.mts

@@ -18,6 +18,10 @@ import icon from 'astro-icon';
 
 import pagefind from 'astro-pagefind';
 
+import rehypeSlug from 'rehype-slug';
+
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
 import { astroOgImagesGenerator } from 'og-images-generator/astro';
 
 import { paths } from './og-images.config';
@@ -66,6 +70,25 @@ export default defineConfig({
       defaultColor: false,
       transformers: [copyButton()],
     },
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'prepend',
+          content: {
+            type: 'text',
+            value: '#',
+          },
+          headingProperties: {
+            className: ['anchor'],
+          },
+          properties: {
+            className: ['anchor-link'],
+          },
+        },
+      ],
+    ],
   },
   vite: {
     resolve: {

package.json

@@ -33,6 +33,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "reading-time": "^1.5.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
     "swr": "^2.3.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2"

src/styles/global.scss

@@ -259,6 +259,10 @@ a,
   @apply text-blue-800 hover:text-blue-700 focus:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200 dark:focus:text-blue-200;
 }
 
+.anchor-link {
+  @apply -ml-6 w-6 inline-block no-underline;
+}
+
 [id] {
   scroll-margin-top: 6rem;
 }