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,
                },
            },
        })
    },
}),
Return to top