[[toc]] only generate same link when two or more headers are same

[puiiyuen]

• I confirm that this is an issue rather than a question.

Bug report

When there are two or more headers in same name, the [[toc]] only generates one link for all same name headers. Other headers cannot be navigated to the right positions. Btw, the sidebar works well!

Steps to reproduce

# Test toc

[[toc]]

## Header 1
<!-- same header name -->
### Header 2
- Under *first* header 2 
- Under *first* header 2 

### Header 3
- Under header 3

## Header 4
<!-- same header name -->
### Header 2
- Under *second* header 2 
- Under *second* header 2 

What is expected?

They should be different links:
First "Header 2": localhost:8000/docs/test/test.html#header-2
Second "Header 2": localhost:8000/docs/test/test.html#header-2-2

What is actually happening?

They are same:
First "Header 2": localhost:8000/docs/test/test.html#header-2
Second "Header 2": localhost:8000/docs/test/test.html#header-2

Other relevant information

• Output of npx vuepress info in my VuePress project:
  Environment Info:

  System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 13.1.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: Not Found
    Safari: 13.0.3
  npmPackages:
    @vuepress/core: Not Found
    @vuepress/theme-default: Not Found
    vuepress: Not Found
  npmGlobalPackages:
    vuepress: 1.2.0

[meteorlxy]

That could be an issue of markdown-it-table-of-contents.

You can try vuepress-plugin-table-of-contents

[puiiyuen]

Thanks, man!

It seems that markdown-it-table-of-contents has not been maintained for a long time.

vuepress-plugin-table-of-contents works well. Hopefully, vuepress will replace it as default toc compoent.

[meteorlxy]

We used to replace it, but reverted in a previous version due to some reasons.

Maybe it could be the default toc component in a future version

[kefranabg]

I agree, let's check if vuepress-plugin-table-of-contents can do the job!

[haoranpb]

I made a demo with vuepress-plugin-table-of-contents.

I think it also works well in #1985 's situation, though it will not display the badge.

Any idea why it's reverted in the first place?

Also, it's a breaking change

current
[[toc]]

vuepress-plugin-table-of-contents
<TOC />

[meteorlxy]

I remembered that it was not a complex issue. @ludanxer if you are interested, I could help to find the history:

• feat($markdown): TOC component (close: #1275) #1375 original PR
• fbbd677 reverted commit

[meteorlxy]

#1375 Tried to replace the [[toc]] syntax to avoid introducing breaking changes, which caused a ssr-mismatch issue.

As I remembered, the [[toc]] syntax will generate HTML like <p><div></div></p>, which is invalid.

[haoranpb]

Found two other related history #1436 , #1596