How to implement TOC in Astro?

I am writing (rewriting) my blog from Nextjs to Astro because I feel it's better to manage with Markdown files.

And one of the features I require in some of my posts or notes is to have a table of contents (TOC). Because some posts are quite long.

Looking in google I found a post where there were some instructions to do it, unfortunately the implementation is deprecated :(.

Here are the steps I followed to implement TOC in my posts (md and mdx):

Installation

npm i rehype-slug rehype-toc rehype-autolink-headings rehype-stringify remark-toc 

Create markdown.config.ts file

this because it needs to implement for md and mdx files.

import remarkToc from "remark-toc"; import rehypeToc from "rehype-toc"; export default { remarkPlugins: [[remarkToc, { tight: true, ordered: true }]], rehypePlugins: [ [ rehypeToc, { headings: ["h1", "h2", "h3"], cssClasses: { toc: "toc-post", link: "toc-link", }, }, ], ], }; 

Add to astro.config file

... import markdownConfig from './markdown.config' export default defineConfig({ markdown: markdownConfig, integrations: [ mdx({ ...markdownConfig, extendPlugins: false, }), ] }); 

I hope it will be of great help.