``ts
import { getSingletonHighlighter } from 'shiki'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/shiki'

const highlighter = await getSingletonHighlighter({
themes: ['github-light'],
langs: ['javascript', 'typescript', 'python'],
})
const parser = createParser(highlighter)
export const shikiPlugin = createHighlightPlugin({ parser })
`

`ts
import {
getSingletonHighlighter,
type BuiltinLanguage,
type Highlighter,
} from 'shiki'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser, type Parser } from 'prosemirror-highlight/shiki'

let highlighter: Highlighter | undefined
let parser: Parser | undefined

/**
* Lazy load highlighter and highlighter languages.
*
* When the highlighter or the required language is not loaded, it returns a
* promise that resolves when the highlighter or the language is loaded.
* Otherwise, it returns an array of decorations.
*/
const lazyParser: Parser = (options) => {
if (!highlighter) {
return getSingletonHighlighter({
themes: ['github-light'],
langs: [],
}).then((h) => {
highlighter = h
})
}

const language = options.language as BuiltinLanguage
if (language && !highlighter.getLoadedLanguages().includes(language)) {
return highlighter.loadLanguage(language)
}

if (!parser) {
parser = createParser(highlighter)
}

return parser(options)
}

export const shikiLazyPlugin = createHighlightPlugin({ parser: lazyParser })
`

When using Shiki, two CSS variables are set automatically to the

 element:
- --prosemirror-highlight: The text color of the code block
- --prosemirror-highlight-bg: The background color of the code block
You can use these variables to set the background color and text color of the code block.
`css
.ProseMirror pre {
  color: var(--prosemirror-highlight, inherit);
  background-color: var(--prosemirror-highlight-bg, inherit);
}
`

`ts
import 'highlight.js/styles/default.css'

import { common, createLowlight } from 'lowlight'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/lowlight'

const lowlight = createLowlight(common)
const parser = createParser(lowlight)
export const lowlightPlugin = createHighlightPlugin({ parser })
`

`ts
import { refractor } from 'refractor/all'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/refractor'

const parser = createParser(refractor)
export const refractorPlugin = createHighlightPlugin({ parser })
`

`ts
import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/sugar-high'

const parser = createParser()
export const sugarHighPlugin = createHighlightPlugin({ parser })
`

`css
:root {
--sh-class: #2d5e9d;
--sh-identifier: #354150;
--sh-sign: #8996a3;
--sh-property: #0550ae;
--sh-entity: #249a97;
--sh-jsxliterals: #6266d1;
--sh-string: #00a99a;
--sh-keyword: #f47067;
--sh-comment: #a19595;
}
``