rehype-toc icon indicating copy to clipboard operation
rehype-toc copied to clipboard

[Feature Request] Add Extract ToC

Open yordis opened this issue 4 years ago • 2 comments

I would like to extract the TOC without injecting it back so I can have a bit more control of what to do with it.

Primarily the rendering of such content will be completely out of the element that renders the mdx that I have set up and is able to read the ToC on the server-side so I can create filtering.

yordis avatar Oct 31 '21 09:10 yordis

+1! I'm wondering if there can be an option to return the generated ToC node instead of the root node of the entire document.

b-x-wu avatar Mar 20 '23 03:03 b-x-wu

Hi! I was also look for a solution to extract the table of content.

I decided to use https://cheerio.js.org/ to extract the table of content and use it where I want, here is an example:

  let content = (
    await unified()
      .use(remarkParse)
      .use(remarkRehype)
      .use(rehypeHighlight)
      .use(rehypeSlug)
      .use(rehypeStringify)
      .use(toc, {
        headings: ["h1", "h2", "h3"],
      })
      .process(body_markdown)
  ).toString();

  const $ = cheerio.load(content.toString());

  const tocContent = $("nav.toc").html();

  $("nav.toc").remove();

  content = $.html();

kerwanp avatar May 13 '23 07:05 kerwanp