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

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 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 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 ' , th