Themes

All Themes

Inherited from shiki, here are all the themes bundled in shikiji.

ID
dark-plus
dracula
dracula-soft
github-dark
github-dark-dimmed
github-light
light-plus
material-theme
material-theme-darker
material-theme-lighter
material-theme-ocean
material-theme-palenight
min-dark
min-light
monokai
nord
one-dark-pro
poimandres
rose-pine
rose-pine-dawn
rose-pine-moon
slack-dark
slack-ochin
solarized-dark
solarized-light
vitesse-black
vitesse-dark
vitesse-light

Load Custom Themes

You can load custom themes by passing a Theme object into the themes array.

import { getHighlighter } from 'shikiji'

const myTheme = JSON.parse(fs.readFileSync('my-theme.json', 'utf8'))

const highlighter = await getHighlighter({
  themes: [myTheme]
})

const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'my-theme'
})

You can also load themes after the highlighter has been created.

import { getHighlighter } from 'shikiji'

const myTheme = JSON.parse(fs.readFileSync('my-theme.json', 'utf8'))

const highlighter = await getHighlighter()

await highlighter.loadTheme(myTheme) // <--

const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'my-theme'
})

The theme should be a TextMate theme in JSON object. For example, it should looks like this.