Skip to content

rfoel/use-shiki

Repository files navigation

use-shiki

React hook for using Shiki syntax highlighter

npm npm bundle size NPM semantic-release

Usage

import useShiki, { setCDN } from 'use-shiki'

setCDN('https://unpkg.com/shiki/')

function App() {
  const highlighter = useShiki({ theme: 'dracula', langs: ['jsx'] })

  return (
    <code
      dangerouslySetInnerHTML={{
        __html: highlighter?.codeToHtml(
          'const [count, setCount] = useState(0)',
          {
            lang: 'jsx',
          },
        ),
      }}
    />
  )
}

export default App

Contributing

Issues and pull requests are welcome.

License

MIT