tous les articles
tuto1 min de lecture

Coloration syntaxique côté serveur avec Shiki

Comment je rends des blocs de code en SSR sans charger un seul ko de JS supplémentaire côté client.

Mathieu N.28 mars 2026

Shiki utilise les mêmes grammaires TextMate que VS Code. La sortie est du HTML pur, sans dépendance runtime.

Setup minimal

import { createHighlighter } from 'shiki'

const h = await createHighlighter({
  themes: ['github-light', 'github-dark'],
  langs: ['ts', 'vue', 'bash']
})

const html = h.codeToHtml(source, { lang: 'ts', theme: 'github-light' })

C'est tout. À intégrer dans un endpoint Nitro ou un build step.