Skip to content

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é vs caf) — 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.