简体中文
EnglishWhat "Zero Runtime" Means in Shiki
Updated
Shiki's "Zero Runtime" means the syntax highlighting happens ahead of time — during your build or on the server — rather than in the browser. The output is plain HTML with inline styles (or CSS classes), so the page needs no highlighting JavaScript at all. This is the right fit when you render code at build time or on the server and want fast, stable pages; it is not a fit if you must highlight code that only exists in the browser after user input.
The core mechanism
Shiki is powered by TextMate grammars — the same engine your VS Code uses — so its tokenization matches what you see in the editor and improves as VS Code does. The key design choice is when that engine runs.
- Build time / server time: Shiki parses the code and emits highlighted markup.
- Browser time: nothing. The browser just renders the HTML and CSS it already received.
Because the highlighting is already resolved into markup, there is no highlighter bundle to download, parse, or execute on the client.
What "no runtime" actually removes
| Concern | With a runtime highlighter | With Shiki (zero runtime) |
|---|---|---|
| JavaScript shipped for highlighting | Yes, a library must load and run | None |
| Work done in the browser | Tokenize + style on every render | Already done |
| Flash of unstyled code | Possible while JS loads | Avoided — styles arrive with the HTML |
| Output format | Usually generated at runtime | Static HTML + CSS |
The practical benefit is straightforward: less JavaScript to download and execute, and code blocks that are styled the moment the page paints.
Where it fits well
Zero runtime is a natural match for:
- Static site generators — highlight once at build, ship static HTML.
- Server-side rendering — highlight during the request or at render time, send finished markup.
- Content-heavy docs and blogs — code blocks are known ahead of time, so there is no reason to pay a client-side cost.
In all of these, the code is fixed before the page reaches the user, which is exactly the condition zero runtime requires.
Where it does not fit
If the code to highlight is only known in the browser — a live editor, user-typed snippets, or content fetched and rendered client-side — then something has to run there. Zero runtime assumes the highlighting can be completed before the browser renders, so dynamic, client-only code is outside its scope.
How to verify it in your own build
- Highlight a code block with Shiki during your build or server render.
- Inspect the generated HTML: you should see the highlighted markup and its styles already present.
- Check the network panel: there should be no syntax-highlighting script loaded for that block.
- Confirm the code block is styled before any JavaScript runs.
If steps 2–4 hold, you are getting the zero-runtime behavior. If a highlighter script still appears, the highlighting is happening at runtime instead.