Open monsterooo opened 1 year ago
Go ahead and check this config option, you can load up remark and rehype plugins for generating TOC. If I remembered right, remark-extract-toc
is able to extract TOC (and export it as a named object) from the .mdx
file.
Then you might need to access the named exports. You can check this section for details.
Alternatively, implement a plugin yourself is not that hard. Try the following code:
import { visit } from 'unist-util-visit'
import { slug } from 'github-slugger'
import { toString } from 'mdast-util-to-string'
const remarkToc = (options) => {
return (tree) => visit(tree, 'heading', (node, index, parent) => {
const text= toString(node)
options.exportRef.push({
text,
url: `#${slug(text)}`,
depth: node.depth
})
})
}
export default remarkToc
Import remarkToc
and load it to the plugins list:
const toc = []
const { code } = await bundleMDX({
// ...other options
mdxOptions: (options, frontmatter) => {
options.remarkPlugins = [
...(options.remarkPlugins || []),
[remarkToc, {
exportRef: toc
}],
]
return options
}
})
// now you can use `toc` to render the table of contents!
The structure of toc
is what we described in the remarkToc
plugin. It looks like this:
[{
text: "ä¸€çº§æ ‡é¢˜",
url: "#ä¸€çº§æ ‡é¢˜",
depth: 1
}, {
text: "second level heading",
url: "#second-level-heading",
depth: 2
}, {
text: "ä¸è‹±æ–‡æ··æŽ’ heading",
url: "#ä¸è‹±æ–‡æ··æŽ’-heading",
depth: 1
}]
mdx-bundler
version: 8.0.node
version: v16.18.0npm
version: 8.19.2Problem description:
Thanks to a great project like mdx-bundler that helped me reduce my development workload.
I want to create a directory of articles in mdx-bundler, but so far I haven't found a way to do it. I don't know if you have any ideas
I found an article, but I don't know how to do it in mdx-bundler
A huge thank you