Markdown generates anchor links in headers

package.json

@@ -29,7 +29,9 @@
     "katex": "^0.15.3",
     "nanoid": "^3.3.2",
     "percival-wasm": "file:./crates/percival-wasm/pkg",
+    "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.2",
+    "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "remark-math": "^5.1.1",
     "remark-parse": "^10.0.1",

src/components/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import type { Readable } from "svelte/store";
   import { NotebookState } from "@/lib/notebook";
   import { createNotebookStore } from "@/lib/stores";
@@ -32,6 +32,11 @@
       }
       notebookStore = createNotebookStore(NotebookState.load(unmarshal(text)));
     }
+    // Navigate to hash after the page loads
+    if (window.location.hash) {
+      await tick();
+      document.getElementById(window.location.hash.slice(1))?.scrollIntoView();
+    }
   });
 
   /** Handler to prompt the user before navigating away from the page. */

src/components/cell/CellOutput.svelte

@@ -133,4 +133,25 @@
   .markdown-output :global(code) {
     @apply text-sm text-gray-900;
   }
+
+  .markdown-output :global(:where(h1, h2, h3, h4, h5, h6) span.icon.icon-link) {
+    @apply transition-all;
+  }
+
+  .markdown-output
+    :global(:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link) {
+    display: inline;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 0.75em;
+    padding-left: 1em;
+    padding-right: 0.5em;
+  }
+
+  .markdown-output
+    :global(:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link:hover) {
+    background-size: 0.9em;
+    filter: invert(0.2);
+  }
 </style>

src/lib/text.ts

@@ -3,13 +3,17 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkMath from "remark-math";
 import remarkRehype from "remark-rehype";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeStringify from "rehype-stringify";
 
 const pipeline = unified()
   .use(remarkParse)
   .use(remarkMath)
   .use(remarkRehype)
+  .use(rehypeSlug)
+  .use(rehypeAutolinkHeadings, { behavior: "append" })
   .use(rehypeKatex)
   .use(rehypeStringify);