<CodeStepper>

Progressive code reveal with line ranges and highlights.

Preview Code

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

const slides = () => {
const Highlighter = useShikiHighlighter()
const code = `function greet(name: string) {
console.log('Hello')
return 'Hello, ' + name
}`
return (
  <>
    <Slide>
      <CodeStepper
        language="ts"
        highlighter={Highlighter}
        steps={[
          { lines: [1, 2] },
          { lines: [1, 5], highlight: [3, 4, 5] },
        ]}
      >{code}</CodeStepper>
    </Slide>
  </>
)
}

export default slides

Name	Type	Default	Description
children	string	—	Source code as a string child.
language?	string	—	Language for the highlighter.
highlighter?	ComponentType<HighlighterProps>	—	Renderer — e.g. from useShikiHighlighter().
steps	CodeStep[]	—	Per-step lines / highlights / focus / annotations.

CodeStep shape:

interface CodeStep {
  lines?: [number, number]
  highlight?: number[]
  focus?: [number, number]
  annotation?: ReactNode
  annotationLine?: number
}