50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
|
|
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
|
|
|
|
export function useHighlighter(_highlighter?: HighlighterCore | null) {
|
|
const [highlighter, setHighlighter] = useState<HighlighterCore | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (_highlighter) {
|
|
return
|
|
}
|
|
|
|
createHighlighterCore({
|
|
themes: [
|
|
import('@shikijs/themes/one-light'),
|
|
import('@shikijs/themes/vitesse-dark'),
|
|
import('@shikijs/themes/snazzy-light'),
|
|
import('@shikijs/themes/everforest-light'),
|
|
import('@shikijs/themes/github-dark-default'),
|
|
],
|
|
langs: [
|
|
import('@shikijs/langs/css'),
|
|
import('@shikijs/langs/javascript'),
|
|
import('@shikijs/langs/tsx'),
|
|
import('@shikijs/langs/jsx'),
|
|
import('@shikijs/langs/xml'),
|
|
import('@shikijs/langs/html'),
|
|
import('@shikijs/langs/python'),
|
|
import('@shikijs/langs/sh'),
|
|
import('@shikijs/langs/json'),
|
|
import('@shikijs/langs/sql'),
|
|
import('@shikijs/langs/nginx'),
|
|
import('@shikijs/langs/mermaid'),
|
|
import('@shikijs/langs/markdown'),
|
|
],
|
|
engine: createOnigurumaEngine(import('shiki/wasm')),
|
|
}).then(highlighter => {
|
|
setHighlighter(highlighter)
|
|
})
|
|
}, [_highlighter])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
highlighter?.dispose()
|
|
}
|
|
}, [highlighter])
|
|
|
|
return _highlighter || highlighter
|
|
}
|