How to implement TOC in Astro?

#markdown #astro #toc

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.

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.