feat: implement markdown toc and custom heading ids

closes issue #24
2 years ago · 1a73878053
parent 636d245873
commit 1a73878053
4 changed files with 333 additions and 0 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -42,12 +42,15 @@
        "postcss": "^8.4.14",
        "prettier": "^2.7.1",
        "qrcode": "^1.5.1",
+        "rehype-slug": "^5.0.1",
        "rehype-stringify": "^9.0.3",
        "remark": "^14.0.2",
        "remark-breaks": "^3.0.2",
        "remark-gfm": "^3.0.1",
+        "remark-heading-id": "^1.0.0",
        "remark-parse": "^10.0.1",
        "remark-rehype": "^10.1.0",
+        "remark-toc": "^8.0.1",
        "shareon": "^2.0.0",
        "solid-app-router": "^0.4.1",
        "solid-confetti-explosion": "^1.0.3",
@ -1890,6 +1893,18 @@
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
    },
+    "node_modules/@types/extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==",
+      "dev": true
+    },
+    "node_modules/@types/github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==",
+      "dev": true
+    },
    "node_modules/@types/hast": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@ -4079,6 +4094,12 @@
        "ini": "^1.3.2"
      }
    },
+    "node_modules/github-slugger": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
+      "integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==",
+      "dev": true
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -4204,6 +4225,29 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/hast-util-has-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz",
+      "integrity": "sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-heading-rank": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-2.1.0.tgz",
+      "integrity": "sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-is-element": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
@ -4240,6 +4284,19 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-whitespace": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@ -4980,6 +5037,55 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-toc": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz",
+      "integrity": "sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==",
+      "dev": true,
+      "dependencies": {
+        "@types/extend": "^3.0.0",
+        "@types/github-slugger": "^1.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/unist-util-visit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.1.0.tgz",
+      "integrity": "sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/unist-util-visit-parents": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.1.1.tgz",
+      "integrity": "sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdurl": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@ -6691,6 +6797,25 @@
        "jsesc": "bin/jsesc"
      }
    },
+    "node_modules/rehype-slug": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-5.0.1.tgz",
+      "integrity": "sha512-X5v3wV/meuOX9NFcGhJvUpEjIvQl2gDvjg3z40RVprYFt7q3th4qMmYLULiu3gXvbNX1ppx+oaa6JyY1W67pTA==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^2.0.0",
+        "hast-util-heading-rank": "^2.0.0",
+        "hast-util-to-string": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/rehype-stringify": {
      "version": "9.0.3",
      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-9.0.3.tgz",
@ -6753,6 +6878,42 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-heading-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
+      "integrity": "sha512-86QaOiL+8jTV9P5Y0S25kSIcykCd/XmnqiFltWZRWKHmsVT4sevN7QJnkpUjkCJUpIeWte/LYH7pVlCTGz89fw==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/remark-heading-id/node_modules/unist-util-is": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
+      "dev": true
+    },
+    "node_modules/remark-heading-id/node_modules/unist-util-visit": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-visit-parents": "^2.0.0"
+      }
+    },
+    "node_modules/remark-heading-id/node_modules/unist-util-visit-parents": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "dev": true,
+      "dependencies": {
+        "unist-util-is": "^3.0.0"
+      }
+    },
    "node_modules/remark-parse": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@ -6799,6 +6960,21 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-toc": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-8.0.1.tgz",
+      "integrity": "sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-toc": "^6.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/require-directory": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@ -9539,6 +9715,18 @@
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
    },
+    "@types/extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==",
+      "dev": true
+    },
+    "@types/github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==",
+      "dev": true
+    },
    "@types/hast": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@ -11108,6 +11296,12 @@
        "ini": "^1.3.2"
      }
    },
+    "github-slugger": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
+      "integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==",
+      "dev": true
+    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -11193,6 +11387,21 @@
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
    },
+    "hast-util-has-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz",
+      "integrity": "sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w==",
+      "dev": true
+    },
+    "hast-util-heading-rank": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-2.1.0.tgz",
+      "integrity": "sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0"
+      }
+    },
    "hast-util-is-element": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
@ -11221,6 +11430,15 @@
        "unist-util-is": "^5.0.0"
      }
    },
+    "hast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0"
+      }
+    },
    "hast-util-whitespace": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@ -11761,6 +11979,45 @@
      "integrity": "sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==",
      "dev": true
    },
+    "mdast-util-toc": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz",
+      "integrity": "sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==",
+      "dev": true,
+      "requires": {
+        "@types/extend": "^3.0.0",
+        "@types/github-slugger": "^1.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "github-slugger": "^1.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit": "^3.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.1.0.tgz",
+          "integrity": "sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0",
+            "unist-util-visit-parents": "^4.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.1.1.tgz",
+          "integrity": "sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0"
+          }
+        }
+      }
+    },
    "mdurl": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@ -12901,6 +13158,21 @@
        }
      }
    },
+    "rehype-slug": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-5.0.1.tgz",
+      "integrity": "sha512-X5v3wV/meuOX9NFcGhJvUpEjIvQl2gDvjg3z40RVprYFt7q3th4qMmYLULiu3gXvbNX1ppx+oaa6JyY1W67pTA==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^2.0.0",
+        "hast-util-heading-rank": "^2.0.0",
+        "hast-util-to-string": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
    "rehype-stringify": {
      "version": "9.0.3",
      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-9.0.3.tgz",
@ -12947,6 +13219,41 @@
        "unified": "^10.0.0"
      }
    },
+    "remark-heading-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
+      "integrity": "sha512-86QaOiL+8jTV9P5Y0S25kSIcykCd/XmnqiFltWZRWKHmsVT4sevN7QJnkpUjkCJUpIeWte/LYH7pVlCTGz89fw==",
+      "dev": true,
+      "requires": {
+        "unist-util-visit": "^1.4.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
+          "dev": true
+        },
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "dev": true,
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "dev": true,
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
    "remark-parse": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@ -12981,6 +13288,17 @@
        "unified": "^10.0.0"
      }
    },
+    "remark-toc": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-8.0.1.tgz",
+      "integrity": "sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-toc": "^6.0.0",
+        "unified": "^10.0.0"
+      }
+    },
    "require-directory": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -44,12 +44,15 @@
    "postcss": "^8.4.14",
    "prettier": "^2.7.1",
    "qrcode": "^1.5.1",
+    "rehype-slug": "^5.0.1",
    "rehype-stringify": "^9.0.3",
    "remark": "^14.0.2",
    "remark-breaks": "^3.0.2",
    "remark-gfm": "^3.0.1",
+    "remark-heading-id": "^1.0.0",
    "remark-parse": "^10.0.1",
    "remark-rehype": "^10.1.0",
+    "remark-toc": "^8.0.1",
    "shareon": "^2.0.0",
    "solid-app-router": "^0.4.1",
    "solid-confetti-explosion": "^1.0.3",
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@ -10,6 +10,9 @@ import remarkParse from "remark-parse";
 import remarkBreaks from "remark-breaks";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
+import rehypeSlug from "rehype-slug";
+import remarkToc from "remark-toc";
+import remarkCustomHeadingId from "remark-heading-id";
 import remarkGfm from "remark-gfm";
 import HelpIcon from "~icons/carbon/help";

@ -41,7 +44,15 @@ const Markdown: Component<
        .use(remarkParse)
        .use(remarkGfm)
        .use(remarkBreaks)
+        .use(remarkCustomHeadingId)
+        .use(remarkToc, {
+          maxDepth: 3,
+          tight: true,
+          ordered: true,
+          heading: "inhalt|inhaltsverzeichnis|toc|table[ -]of[ -]contents?",
+        })
        .use(remarkRehype)
+        .use(rehypeSlug)
        .use(rehypeStringify)
        .process(markdown);
      setHtml(String(result));
--- a/src/index.d.ts
+++ b/src/index.d.ts
@ -3,3 +3,4 @@ declare const __BUILD_TIME__: number;
 declare module "typer-js";
 declare module "autosize";
 declare module "shareon";
+declare module "remark-heading-id";