Appearance
Het probleem zit hem er meestal in dat Markdown All in One zijn eigen slug-algoritme gebruikt om anchor-links te genereren, en dat hoeft niet exact hetzelfde te zijn als wat VitePress doet (via markdown-it-anchor).
Stap 1: Zet de slugify-mode van Markdown All in One op "github"
In je VS Code settings.json:
json
"markdown.extension.toc.slugifyMode": "github"De standaard markdown-it-anchor slug-generator (die VitePress gebruikt) volgt grotendeels dezelfde regels als GitHub: lowercase, spaties → streepjes, leestekens weg. Met deze setting matchen de meeste ToC-links gewoon.
Stap 2: Test de daadwerkelijke ID's in de browser
Build je docs lokaal (npm run docs:dev), open een pagina, hover over een heading en klik op het #-anker-icoontje, of inspecteer het element. Zo zie je exact welke id VitePress heeft gegenereerd.
Stap 3: Waar het vaak misgaat
- Accenten/diakritische tekens (bijv. "café" → soms
cafévscaf) — kan verschillen per algoritme - Emoji's in headers — worden door beide meestal weggehaald, maar niet altijd consistent
- Dubbele headers met dezelfde tekst — VitePress voegt een suffix toe (
-1,-2), Markdown All in One doet dat ook maar niet gegarandeerd in dezelfde volgorde - Hoofdlettergebruik en cijfers — meestal geen probleem
Stap 4: Forceer consistentie met custom anchors
Als een specifieke link toch niet matcht, geef de heading in VitePress een expliciet anker mee:
md
## Mijn Sectie {#mijn-sectie}Dan weet je zeker dat de link #mijn-sectie altijd werkt, ongeacht wat de auto-generator doet — en kun je die ID ook los in je ToC-link zetten.
Kortom: zet slugifyMode: "github", en voor headers met bijzondere tekens (accenten, emoji, leestekens) check je handmatig even of de gegenereerde ID matcht met wat VitePress produceert.