Unstyled theme for Shiki
This is a special theme for Shiki to use together with @jcayzac/shiki-transformer-token
.
[!WARNING] Used alone, this theme is non-functional, as it replaces color values with grammar token names and will generate invalid CSS. It MUST be used together with the transformer.
Shiki is great, but it can be daunting to create a new theme from scratch, or even just to customize an existing one.
Sure, you can use the experimental CSS Variables Theme, which lets you specify a color palette using CSS variables. But that theme uses a very reduced grammar, internally, so the result is not as good as the built-in themes.
This theme gives up on styling completely, and instead replaces color values with grammar token names, which @jcayzac/shiki-transformer-token
then transforms into [data-token]
attributes in the produced HTML.
This gives you complete flexibility on how to style your code, not limited to the CSS variables that Shiki supports, nor just to colors either.
# pnpm
pnpm add @jcayzac/shiki-theme-token
# bun
bunx add @jcayzac/shiki-theme-token
# npm
npx add @jcayzac/shiki-theme-token
# yarn
yarn add @jcayzac/shiki-theme-token
# deno
deno add npm:@jcayzac/shiki-theme-token
Make sure to use both the theme and the transformer together.
import { createHighlighter } from 'shiki'
import theme from '@jcayzac/shiki-theme-token'
import transformer from '@jcayzac/shiki-transformer-token'
const highlighter = await createHighlighter({
themes: [theme],
// …other options
})
// It's better to add the transformer at the end of the list,
// after the other transformers have run.
const transformers = [
// …other transformers
transformer(),
]
const rendered = highlighter.codeToHtml(code, {
theme: 'token',
defaultColor: false,
transformers,
// …other options
}
In your CSS, you can then style elements based on the [data-token]
attribute's value as you see fit. Here is a sample stylesheet. You can apply any style you want, including backgrounds, transitions and whatnot.
The full TextMate grammar isn't supported, only a fairly opinionated subset. Feel free to open an issue if you need tokens that aren't supported yet!
[!TIP] You can inspect tokens in Visual Studio Code by selecting
> Developer: Inspect Editor Tokens and Scopes
in the command palette.
If you like anything here, consider buying me a coffee using one of the following platforms: