CODEWITHSUNDEEP
reactjsmarkdownreact-markdown
Bernard Hymmen
Bernard Hymmen

Reputation: 857

How do you use remark-toc with react-markdown?

I'm using react-markdown in one of my projects and that's been working great so far. I've found that some of my Markdown content is getting long enough that it would be nice to have an autogenerated table of contents based on headings in the document at the top of the rendered output. There are a couple of ways to go about this, but for me is seems like using the common recommendation to "just use remark-toc" would make the most sense, especially since I'm already using the remark-gfm plugin. My problem, however, is that this does not appear to do anything. Here's some demo code for my problem:

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";

export default function App() {
  const markdownContent = `
*{{ I expect to see an autogenerated headings-based table of contents above here. }}* 
# Using remark-toc with react-markdown

## Basic Markdown
  A paragraph with *emphasis* and **strong importance**.

## Strikethrough
This ~is not~ strikethrough, but ~~this is~~!
`;

  return (
    <div className="App">
      <ReactMarkdown
        children={markdownContent}
        remarkPlugins={[[remarkGfm, { singleTilde: false }], [remarkToc]]}
      />
    </div>
  );
}

My expectation is that I should get something like this, but the links at the top never get created:

Using remark-toc with react-markdown

Basic Markdown

A paragraph with emphasis and strong importance.

Strikethrough

This ~is not~ strikethrough, but ~~this is~~! (well, strikethroughs do actually work in my real project)

I'm not sure what I'm missing. I see that there's some guidance around options in the remark-toc documentation, but I don't think I should need to set any options for the default experience to actually do something...anything.

The remark-toc documentation does have this passage in it:

This plugin does not generate a table of contents for the whole document or expose it to other plugins. You can use the underlying mdast utility mdast-util-toc and create a plugin yourself to do that and more.

I'm not quite sure what that's telling me, but I believe it's saying that the plugin won't pick up thinks like code blocks or images to include in the table of contents and that it won't apply any other plugins (like, say, a language translation plugin) to results that it does find. If I understand this correctly, then none of that would be a problem for me.

Here's a CodeSandbox link to a slightly expanded take on the above code: https://codesandbox.io/s/using-remark-toc-with-react-markdown-mhmrmz

Upvotes: 1

Views: 2905

Answers (1)

William Roberts
William Roberts

Reputation: 26

(I am no expert on this but I have recently got it to work.). You need to add a line in your markdown file for the remark-toc to use to put the contents. e.g.

//post.md or post.mdx
# My blog title

### Table of Contents 

## Contents Item 1

## Contents Item 2

A demo for configuring your options.

//replace [remarkToc] with 
[remarkToc,{tight: true,maxDepth: 5},]

Link to the github page: https://github.com/remarkjs/remark-toc

Upvotes: 1

Related Questions