How to implement TOC in Astro?

Stiven Castillo — Thu, 17 Nov 2022 02:01:00 +0000

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.

DEV Community: Stiven Castillo

How to implement TOC in Astro?

Installation

Create markdown.config.ts file

Add to astro.config file