How Customizable Is Shiki for Themes and Languages?

Shiki is highly customizable for both themes and languages. It uses TextMate grammars and VS Code themes, so you can load any compatible theme, add or extend language grammars, and tune the output through configuration options. The main constraint is that customization happens at build time or setup time, not at runtime, because Shiki is designed to produce highlighted HTML ahead of time.

Themes: What You Can Change

Shiki's theme support is built on the same theme format VS Code uses. That means the practical range of customization is wide:

• Use any VS Code theme. If a theme works in VS Code, it can generally be loaded into Shiki. This includes popular community themes, not just a fixed built-in set.
• Switch themes per code block or per project. You can apply different themes to different outputs rather than locking the whole site to one look.
• Control light and dark variants. A common pattern is pairing a light theme with a dark theme so the highlighted output matches the surrounding UI.
• Adjust output styling. Beyond the theme itself, configuration options let you influence how the highlighted result is rendered, so the final markup fits your page rather than forcing your page to fit Shiki.

Because themes come from the VS Code ecosystem, the limiting factor is usually whether a given theme exists in the right format, not whether Shiki can express it.

A concrete example

Suppose you maintain documentation with a light default and a dark mode toggle. You pick one VS Code light theme and one dark theme, configure Shiki to emit both, and let your site's toggle decide which highlighted output to show. No custom color mapping is required on your side, since the theme already defines the token colors.

Languages: Adding and Extending Grammars

Language support follows the same logic as themes. Shiki is powered by TextMate grammars, the same grammar system VS Code relies on, so language coverage tracks what those grammars describe.

• Add languages beyond the defaults. You can register additional TextMate grammars for languages Shiki does not include out of the box.
• Extend existing grammars. If a language's default grammar misses a construct you use, you can supply or adjust a grammar rather than accepting the default.
• Stay aligned with VS Code. Because the engine and grammars match VS Code, improvements to a grammar tend to carry over, so your highlighting does not drift from what developers see in their editor.

The trade-off is the same as with themes: you are working within the TextMate grammar model. Languages that are not well described by a TextMate grammar will not highlight as precisely, regardless of configuration.

Configuration and Integration Options

Customization is not limited to themes and grammars. Shiki exposes configuration that shapes the output and how it plugs into a project:

The ESM and universal module support matters for integration: you can adopt Shiki in modern ESM projects as well as setups that need broader module compatibility, without rewriting your build around a single module style.

The Key Constraint: Zero Runtime

Shiki's "Zero Runtime" design is the factor that shapes all customization. Highlighting is computed ahead of time, so the browser ships pre-highlighted HTML instead of running a highlighter on page load. The practical consequence for customization is:

• Theme and language choices are resolved when you generate the output, not when a visitor loads the page.
• Changing a theme or adding a language means regenerating the highlighted output, not toggling something live in the browser.
• This is what keeps the output accurate and fast, since the heavy grammar work happens before the page is served.

If your requirement is dynamic, per-visitor highlighting decided at runtime, that conflicts with how Shiki is built. If your requirement is accurate, editor-matching highlighting that you configure once and ship, Shiki's customization model fits directly.

How to Decide

Choose Shiki's customization path when:

• You want highlighting that matches VS Code, including its themes and grammars.
• You are comfortable configuring themes and languages at build or setup time.
• You need ESM or universal module integration across different project types.

Look elsewhere when:

• You need to change themes or add languages dynamically in the browser at runtime.
• Your target language is poorly served by TextMate grammars and you need a different parsing approach.

For most documentation sites, blogs, and static projects, the build-time model is not a limitation but the reason the output stays accurate and fast.