Shiki Syntax Highlighting at Scale

Shiki has become the gold standard for syntax highlighting on the modern web, powered by TextMate grammars.

Dual Themes Without Runtime Overhead

By rendering both light and dark theme colors as CSS variables, we can toggle themes instantly without flashing or hydration:

import rehypeShiki from '@shikijs/rehype'

const plugin = [
  rehypeShiki,
  {
    themes: {
      light: 'vitesse-light',
      dark: 'vitesse-dark',
    },
    defaultColor: false,
  },
]

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

This approach ensures zero layout shifts and immaculate aesthetics across all devices.