Use marked-gfm-heading-id for markdown headers

gdg-x · Oct 4, 2023 · a0477a0 · a0477a0
1 parent 0fa80de
commit a0477a0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "firebase": "^10.4.0",
     "lit": "^2.8.0",
     "marked": "^9.0.3",
+    "marked-gfm-heading-id": "^3.1.0",
     "pwa-helpers": "^0.9.1",
     "register-service-worker": "^1.7.2",
     "web-vitals": "^3.5.0"

diff --git a/src/components/markdown/base.ts b/src/components/markdown/base.ts
@@ -1,12 +1,11 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { marked } from 'marked';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
 import { hasUnsupportedTags, unsupportedHtmlTags } from '../../utils/markdown';
 import { ThemedElement } from '../themed-element';
 
-marked.setOptions({
-  headerIds: true,
-});
+marked.use(gfmHeadingId());
 
 export class Markdown extends ThemedElement {
   static override get styles() {