---
title: 'Shiki Syntax Highlighting at Scale'
description: 'How to achieve ultra-fast server-side code highlighting with dual theme support and zero client JS.'
subtitle: 'Dual themes, transformers, and optimal bundle size.'
date: '2026-03-05'
lang: 'en'
---

:c[Shiki]{href="https://shiki.style"} 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:

```typescript
import rehypeShiki from '@shikijs/rehype'

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

```css
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.