@jcayzac/shiki-theme-token

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.

Motivation

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.

Installation

# 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

Usage

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.

What tokens are supported?

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.

Like it? Buy me a coffee!

If you like anything here, consider buying me a coffee using one of the following platforms: