DEV Community

Alex Spinov
Alex Spinov

Posted on

Shiki Has a Free Syntax Highlighter — Here's How to Use It

#syntax #highlighting #typescript #webdev

Prism.js highlights code on the client at runtime. highlight.js ships a huge bundle. Shiki uses VS Code's exact grammar engine — pixel-perfect highlighting at build time.

What Is Shiki?

Shiki is a syntax highlighter powered by TextMate grammars — the same engine VS Code uses. It produces perfectly highlighted HTML at build time, so zero JavaScript runs in the browser.

Quick Start 

npm install shiki
Enter fullscreen mode Exit fullscreen mode 
import { codeToHtml } from 'shiki';

const html = await codeToHtml('const x = 42;', {
  lang: 'typescript',
  theme: 'github-dark',
});

// Returns: <pre class="shiki github-dark">...</pre>
// No client-side JS needed — just render the HTML
Enter fullscreen mode Exit fullscreen mode

100+ Languages, 30+ Themes

All VS Code languages and themes work out of the box:

// Popular languages
const tsCode = await codeToHtml(code, { lang: 'typescript', theme: 'one-dark-pro' });
const pyCode = await codeToHtml(code, { lang: 'python', theme: 'dracula' });
const rsCode = await codeToHtml(code, { lang: 'rust', theme: 'vitesse-dark' });
Enter fullscreen mode Exit fullscreen mode

Themes include: github-dark, github-light, one-dark-pro, dracula, vitesse, nord, catppuccin, material-theme, and more.

Advanced Features

Dual Themes (Light/Dark) 

const html = await codeToHtml(code, {
  lang: 'typescript',
  themes: {
    light: 'github-light',
    dark: 'github-dark',
  },
});
// Generates CSS variables — switch themes without re-rendering
Enter fullscreen mode Exit fullscreen mode

Line Highlighting 

const html = await codeToHtml(code, {
  lang: 'typescript',
  theme: 'github-dark',
  transformers: [
    transformerNotationHighlight(), // Highlights lines with // [!code highlight]
    transformerNotationDiff(),      // Shows +/- diffs with // [!code ++] // [!code --]
    transformerNotationFocus(),     // Blurs unfocused lines
  ],
});
Enter fullscreen mode Exit fullscreen mode

Custom Highlighter (Reuse) 

import { createHighlighter } from 'shiki';

const highlighter = await createHighlighter({
  themes: ['github-dark', 'github-light'],
  langs: ['typescript', 'python', 'rust', 'sql'],
});

// Reuse — no re-initialization cost
const html1 = highlighter.codeToHtml(code1, { lang: 'typescript', theme: 'github-dark' });
const html2 = highlighter.codeToHtml(code2, { lang: 'python', theme: 'github-dark' });
Enter fullscreen mode Exit fullscreen mode

Framework Integration

  • Astro — @astrojs/shiki (built-in)
  • Next.js — build-time rendering in RSC
  • Nuxt — nuxt-shiki module
  • Markdown — rehype-shiki, markdown-it-shiki
  • VitePress — built-in

Why Shiki Over Alternatives

Feature Shiki Prism.js highlight.js
Runtime JS 0KB ~20KB ~40KB
Accuracy VS Code exact Good Good
Languages 100+ 300+ 190+
Themes 30+ VS Code themes Custom CSS Custom CSS
Dual themes Built-in Manual Manual
Line highlighting Transformers Plugin No

Get Started

Documenting your code? My Apify scrapers extract data for documentation sites. Custom solutions: spinov001@gmail.com

Top comments (0)