65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React, { createContext, useEffect, useState } from 'react'
|
|
import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
|
|
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
|
|
|
|
export const HighlighterContext = createContext<HighlighterCore | null>(null)
|
|
|
|
export interface HighlighterProviderProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* Shiki Highlighter Provider - 提供全局的代码高亮器实例
|
|
*/
|
|
export function HighlighterProvider({ children }: HighlighterProviderProps) {
|
|
const [highlighter, setHighlighter] = useState<HighlighterCore | null>(null)
|
|
|
|
useEffect(() => {
|
|
let mounted = true
|
|
|
|
createHighlighterCore({
|
|
themes: [
|
|
import('@shikijs/themes/github-light'),
|
|
import('@shikijs/themes/github-dark-default'),
|
|
import('@shikijs/themes/vitesse-dark'),
|
|
import('@shikijs/themes/one-light'),
|
|
import('@shikijs/themes/snazzy-light'),
|
|
import('@shikijs/themes/everforest-light'),
|
|
],
|
|
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(h => {
|
|
if (mounted) {
|
|
setHighlighter(h)
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
mounted = false
|
|
highlighter?.dispose()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<HighlighterContext.Provider value={highlighter}>
|
|
{children}
|
|
</HighlighterContext.Provider>
|
|
)
|
|
}
|
|
|
|
export default HighlighterProvider
|