I'm wondering if I'm doing something wrong here. The output of rehype-toc seems to be structured in a weird way.

Using rehype-toc, given the input .svx file:

# First Header

Hello world!

## Second Header

This is some text.

### Third header

Hey friends! 👋

```ts
function greet(name: string) {
	console.log(`Hey ${name}! 👋`)
}

I get the output:

<nav class="toc">
    <ol class="toc-level toc-level-1">
        <li class="toc-item toc-item-h1">
            <a class="toc-link toc-link-h1" href="#first-header">First Header</a>
            <ol class="toc-level toc-level-2">
                <li class="toc-item toc-item-h2">
                    <a class="toc-link toc-link-h2" href="#second-header">Second Header</a>
                    <ol class="toc-level toc-level-3">
                        <li class="toc-item toc-item-h3">
                            <a class="toc-link toc-link-h3" href="#third-header">Third header</a>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</nav>

To me, this html looks weird. Why does the output contain nested lists?
If, for example, I wanted to apply a border to a li, I could target it with .toc li or .toc toc-item, and set a border.
But because each li includes the other levels (for some reason I don't understand?), the border would extend all the way down, causing unexpected effects:

.toc-item {
	@apply border-2  border-black/20;
}

yields:

Similar issues occur when you try to make ol a list-decimal:

.toc ol {
        @apply list-decimal
}

yields

As each ol just contains one item!

A structure like this would make more sense to me:

<nav class="toc">
    <ol>
        <li class="toc-item toc-item-h1">
            <a class="toc-link toc-link-h1" href="#first-header">First Header</a>
        </li>
	<li class="toc-item toc-item-h2">
		<a class="toc-link toc-link-h2" href="#second-header">Second Header</a>
	</li>
	<li class="toc-item toc-item-h3">
		<a class="toc-link toc-link-h3" href="#third-header">Third header</a>
	</li>
    </ol>
</nav>

As you could target each level with the nth child selector.

Have I done something weird with my config to cause this behaviour? Or is this expected behaviour? And if so, what is the reasoning to not just use the intrinsic capabilities of lists?

Is there a way to specify a selector within which I can put the TOC?

I have a use-case where I want to make the TOC position: sticky. But because the sticky elements still remain in the flow of the document I have a weird spacing.

This could be a good use-case where I'd like to place the TOC in a pre-determined position in the document.

Happy to elaborate more if needed.

I don't like table of contents at the very beginning of a document. Rather it should be possible to place it at a specific position - e.g. following an introduction or at the very end of a document.

remark-toc allows to place the table of content at some arbitrary position by specifying the heading's title underneath which it should be placed. I couldn't figure out how to do this with rehype-toc. Is that supported at all? If so: how?

The shape of the node object passed to customizeTOC doesn't match the Node interface as specified by the latest version of unified. This is what the plugin is passing:

{
    type: 'element',
    tagName: 'ol',
    properties: { className: 'toc toc-level toc-level-1' },
    children: [ [Object] ]
  }

This is what unified expects:

interface Node {
  type: string
  data: Data?
  position: Position?
}

As a result, we've no way to export the TOC using that method to stringify it, store the AST separately, etc.

Currently you can customize the installation to hide the table of contents if there are no items by doing this:

customizeTOC: (toc) => {
  if (toc.children[0].children.length > 0) {
    return toc;
  }
  return false;
},

I think this should be default functionality! 🙂

Hi, could you please add an option to config where it builds TOC using ul instead of ol.

For people who want logic similar to this project, but want the ability to further customize how the table is rendered, here is a simple ReScript implementation of similar heading gathering logic based on docusaurus v2 implementation: https://framagit.org/-/snippets/6208

Feel free to close this issue.

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.

Hi! Thank you for your work on this library, I just implemented it in the next version of my personal website/blog to generate a TOC for my blog posts since my previous library of choice was coupled to the Gatsby/Remark ecosystem.

I wanted to utilize un-ordered list instead of ordered list for my use case, but it did not appear there was a built-in option to change this and it required writing a custom pre-parser to change the tagType in the HAST before generating the HTML. I think this is a pretty straight forward use case that would be valuable as an optional toggle value in the library options.

Would you be open to this change? I am happy to create a PR to add this functionality if so.

I'm creating a blog using NextJs13 and MDX, I have added a table of contents to my pages using rehype-toc.

I want the table (so element) to be outside the article element, to do this I tried to use the position attribute in the plugin config, but it not worked as expected.

next.config.mjs

const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
        ...
        [rehypeToc, {
            headings: ["h1"],
            // I suppose that TOC will be inserted after the article element
            // (so to be a child of the `<main>` element)
            position: "afterend"
            cssClasses: {
                toc: "toc not-prose",
                link: "toc-link"
            },
        }]
   }},
})

page.tsx

const Index: NextPage = ({ params }: any) => {
const { post } = params

const PostFile = dynamic(() => import(`../posts/${post}.mdx`).
   catch(() => notFound())
)

 return (
   <main>
     <article className='prose prose-slate lg:prose-xl'>
       <PostFile />
     </article>
   </main>
  )
}

If you need more information code is public on my GitHub (blog code is located in /app/blog).

Thanks for this awesome plugin, and I'm trying to wrap a <motion.div> for created TOC, but for some reason, It seems does not support the feature. Here is my related code:

.....
interface NodeTree {
  type: string;
  properties: {
    [key: string]: any;
  };
  children: (NodeTree | string)[];
}
function renderNodeTree(nodeTree: NodeTree): JSX.Element {
  const { type, properties, children } = nodeTree;

  const childElements = (children || []).map((child) => {
    if (typeof child === 'string') {
      return child;
    } else {
      return renderNodeTree(child);
    }
  });

  return React.createElement(type, properties, ...childElements);
}

function customizeTOC(toc:NodeTree){
  const tocJsx = renderNodeTree(toc)
  // return <motion.div>{tocJsx}</motion.div>
  return "Hello"
  // console.log('[toc]: ',tocJsx)
}
.....
      <ReactMarkdown
        className="markdown-body"
        children={contentStr || ''}
        rehypePlugins={[rehypeRaw,[rehypeToc,{customizeTOC,cssClasses:{toc:tocStyle['markdown-toc']}}]]}
        remarkPlugins={[remarkEmoji,remarkGfm,remarkMermaidjs]}
.....

Thanks again!