Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Option to Toggle List Type #7

Open
ghost opened this issue Oct 23, 2021 · 6 comments
Open

[Feature Request] Option to Toggle List Type #7

ghost opened this issue Oct 23, 2021 · 6 comments

Comments

@ghost
Copy link

ghost commented Oct 23, 2021

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.

@rimzzlabs
Copy link

I'm looking forward to this feature too, upvote 👍

@secondmanveran
Copy link

@jodylecompte

It seems that this guy figured it out here #6 ... but failed to share his technique.

Maybe if we all chastise him vehemently he will share the answer ;)

@tohsaka888
Copy link

just use css like this:

 .toc .toc-item::marker {
    font-size: 0px;
 }

@paradite
Copy link

paradite commented Mar 21, 2024

To make it dot:

.toc .toc-item::marker {
  content: '·';
  font-weight: bold;
}

@liquorxm
Copy link

use customizeTOC option.

const convertTocOlToUl = (node) => {
  if (!node) return node;
  if (node.tagName === 'ol') {
    node.tagName = 'ul';
  }
  node.children?.forEach((item) => {
    if (item.tagName === 'ol') {
      item.tagName = 'ul';
    }
    if (item.children) {
      item = convertTocOlToUl(item);
    }
  });

  return node;
};

use(rehypeToc, {
  customizeTOC: (node) => {
    return convertTocOlToUl(node);
  },
})

result

image

@michalgm
Copy link

michalgm commented Nov 27, 2024

another option is just do it in css:

          '& nav ol': {
            listStyleType: 'disc',
          },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants