Open brindosch opened 4 years ago
Problem in markdown-it-table-of-contents plugin.
It needs to be replaced with a new one! It’s not difficult to develop such a plugin
@abernov The problem is that VuePress and markdown-it-table-of-contents are not applying the slugify function on the same header link.
VuePress will use TEXT
and markdown-it-table-of-contents will use TEXT <Badge text="TBA 2.1+"/>
As a workaround, you can use a custom markdown slugify function.
@kefranabg Vuepress passes to markdown-it-table-of-content its own slugify function.
It is possible to rewrite this function so that it removes the badge.
@abernov yes this is what I suggested in the last comment, but this is a workaround, not a fix.
Rewrite the slugify function we pass to markdown-it-table-of-content to remove badges will work, but later we'll have a new bug report saying it's not working with headers containing emojis and probably other things (so it will be hard to maintain).
The clean way to fix this would be to standardize the way vuepress and markdown-it-table-of-contents parse a header title.
Here is the code I've used to fix this issue on my site:
In your config.js
:
const { slugify: vuePressSlugify } = require("@vuepress/shared-utils");
function customSlugifyToHandleBadges(str) {
// Remove badges and use original slugify function
return vuePressSlugify(str.replace(/<Badge[^>]*\/>/, ""));
}
...
module.exports = {
...
markdown: {
slugify: customSlugifyToHandleBadges,
toc: {
slugify: customSlugifyToHandleBadges,
},
},
}
Bug report
If
[[TOC]]
is used in a page where a header has a badge, the link contains also the badge content.Steps to reproduce
### TEXT <Badge text="TBA 2.1+"/>
[[TOC]]
to page### TEXT
will be#text-badge-text-tba-2-1
instead of#text
What is expected?
What is actually happening?
Other relevant information
Output of
npx vuepress info
in my VuePress project:System: OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus) CPU: (4) x64 Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz Binaries: Node: 12.11.1 - /usr/bin/node Yarn: 1.19.1 - /usr/bin/yarn npm: 6.11.3 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: 70.0 npmPackages: @vuepress/core: 1.2.0 @vuepress/theme-default: 1.2.0 vuepress: ^1.2.0 => 1.2.0 npmGlobalPackages: vuepress: Not Found