useShikiHighlighter()

Hook that loads Shiki in the background and returns a ComponentType<HighlighterProps> for CodeStepper / CodeDiff. Call it inside your slides component. Default theme github-dark; languages load on demand unless preloaded via langs.

Preview Code

import { Slide, CodeStepper } from '@react-slides/core'
import { useShikiHighlighter } from '@react-slides/plugin-shiki'

const slides = () => {
const Highlighter = useShikiHighlighter()
const code = `const x = 1`
return (
  <>
    <Slide>
      <CodeStepper
        language="ts"
        highlighter={Highlighter}
        steps={[{ lines: [1, 1] }]}
      >{code}</CodeStepper>
    </Slide>
  </>
)
}

export default slides

import { useShikiHighlighter } from '@react-slides/plugin-shiki'

const Highlighter = useShikiHighlighter({
  theme: 'one-dark-pro',
  langs: ['typescript', 'rust'],
})

Name	Type	Default	Description
theme?	string	'github-dark'	Single Shiki theme name.
themes?	{ light: string; dark: string }	—	Dual-theme dark / light pair.
langs?	string[]	[]	Languages to preload.