Table of Contents
The default "remark-toc" plugin may not generate a TOC for markdown files that are imported as Svelte components. To address this limitation, you can use a built-in function provided by the "svelte-in-markdown" package.
Example usage
<!-- +layout.svelte -->
<script lang="ts">
import { getTableOfContents } from "svelte-in-markdown"
const headings = getTableOfContents({
containerSelector: ".my-markdown-container",
headingLevels: [2, 3, 4, 5, 6],
})
</script>
Returns:
[{
"level": "2",
"textContent": "Example usage",
"attributes": { "id": "example-usage" }
}]
Warning
When using this solution, remember to disable the "remark-toc" plugin.
How to disable "remark-toc" plugin?
import { transformer } from "svelte-in-markdown/transformers/unified"
svelteInMarkdownPreprocess({
onTransform: async (options, config) => {
return await transformer(options, config, {
builtInPlugins: {
remarkToc: {
enable: false,
},
},
})
},
}),