shiki-class-transformer

transfrom shiki inline styles to classes.

usage

add shikiClassTransformer to shiki's transformers options

import { shikiClassTransformer } from 'shiki-class-transformer'
// vitesse-light.json is equal to vitesse-dark.json
import shikiMap from 'shiki-class-transformer/themes/vitesse-light.json'
// import shikiMap from 'shiki-class-transformer/themes/vitesse-dark.json'
import { codeToHtml } from 'shiki'

const html = await codeToHtml(`console.log('hello')`, {
  lang: 'ts',
  theme: 'vitesse-light',
  transformers: [
    shikiClassTransformer({ map: shikiMap }),
    // ...
  ],
})

then, import css file:

import 'shiki-class-transformer/themes/vitesse-light.css'

[!NOTE] If your have different themes, such as 'dark' and 'light', please copy file to your project manually.

Theme Colors Manipulation

If you use shikis's Theme Colors Manipulation, the style in html may be:

<span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;" />

config the keys:

import { shikiClassTransformer } from 'shiki-class-transformer'
import shikiMap from 'shiki-class-transformer/themes/vitesse-light.json'
shikiClassTransformer({
  map: shikiMap,
  keys: ['--shiki-light'], // vitesse-dark.json is ['--shiki-dark']
  deletedKeys: ['--shiki-dark'], // vitesse-dark.json is ['--shiki-light']
}),

Prefix

Modify generate file:

// Modify this line
const PREFIX = 's'

and then run:

pnpm generate

Theme files are here

Future

• [x] test
• [ ] custom prefix