Customize TOC style and template

[muuvmuuv]

Feature request

In my README I prefer to use the TOC-style where the links are listed below each other (like it is now) but in the CHANGELOG I prefer it inline next to each other divided with a middot (·).

Would be nice to have an option here to insert different styles of TOC in a file or have an option in settings.json to create our own templates. 😁

Style1:

- [Headline](#headline)
- [Subhead](#subhead)

Possible Style2:

[Headline](#headline) · [Subhead](#subhead)

How templating could work:

{
    "markdown.extension.toc.marker": "-",
    "markdown.extension.toc.template": "{marker} [{name}](#{link})",
    "markdown.extension.toc.template": "{list} [{name}](#{link})", // for ordered list

    "markdown.extension.toc.marker": "·",
    "markdown.extension.toc.markerSkipLast": true,
    "markdown.extension.toc.template": "[{name}](#{link}) {marker}",
}

[yzhang-gh]

Sounds interesting, although technically it is kind of hard to implement. Allowing custom TOC will make the TOC detection much harder.

I would suggest generating TOC with command and then doing some simple editing with VSCode powerful multi-cursor feature (and optionally "join lines" command).

[muuvmuuv]

@yzhang-gh that is how I do it ATM but let a plugin do this job automatically would be awesome!

Why does it make the detection harder? I would take a look and see how far I come. It is really something that would same me some time :)

[yzhang-gh]

Thanks. If you have any idea just run it by me.

[muuvmuuv]

@yzhang-gh pushed my first attempt. Just an idea but what about using prettier in the repo to keep everything clean? I use husky and pretty-clean in most of my projects to keep a minimal beautification automatically and with VSCode even on-save. It is easy to set up and you can customize prettier very easy.

[yzhang-gh]

Actually, I am using the vscode built-in formatter. As I notice, the code style mainly changed in two aspects:

• Indentation. I personally would like to keep the 4 spaces indentation which gives better visual hierarchy.
• The double quotation in the import clause rather than single. I am fine with it.

Could you please get rid of the style changes in this PR and make a separate one for it?
Because now all the things get mixed up and are hard to review. Many thanks.

[muuvmuuv]

Yep sure @yzhang-gh. I will add an .editorconfig to prevent this in the future. Everyone has their own style and this would keep yours forced for your project.

[muuvmuuv]

Okay @yzhang-gh I made the changes. Just have a look in Revert back setting changes in package.json for the changes I made in package.json and in This are the changes made to toc for the changes I made in the toc-file

[Lemmingh]

Well, I actually think this is the job of presentation, rather than editor. You can render a list in any shape with CSS.

[mxstrand]

Is there an option to simply remove bullets from the TOC? Thank you for your work.

[yzhang-gh]

The TOC is just an HTML list, and its style can be changed with CSS https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

e.g. adding

<style>
    ul { list-style: none; }
</style>

in the Markdown file will remove bullets of all the unordered lists. To apply it only on the TOC, you may apply some CSS selectors depending on your document structure.