77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
import type { Highlighter, BuiltinLanguage as Lang } from 'shiki'
|
|
|
|
const highlighter = ref<Highlighter>()
|
|
|
|
const registeredLang = ref(new Map<string, boolean>())
|
|
let shikiImport: Promise<void> | undefined
|
|
|
|
export function useHighlighter(lang: Lang): {
|
|
promise?: Promise<void>
|
|
highlighter?: Highlighter
|
|
} {
|
|
if (!shikiImport) {
|
|
shikiImport = import('shiki')
|
|
.then(async ({ getHighlighter }) => {
|
|
highlighter.value = await getHighlighter({
|
|
themes: [
|
|
'vitesse-dark',
|
|
'vitesse-light',
|
|
],
|
|
langs: [
|
|
'js',
|
|
'css',
|
|
'html',
|
|
],
|
|
})
|
|
})
|
|
|
|
return { promise: shikiImport }
|
|
}
|
|
|
|
if (!highlighter.value)
|
|
return { promise: shikiImport }
|
|
|
|
if (!registeredLang.value.get(lang)) {
|
|
const promise = highlighter.value.loadLanguage(lang)
|
|
.then(() => {
|
|
registeredLang.value.set(lang, true)
|
|
})
|
|
.catch(() => {
|
|
const fallbackLang = 'md'
|
|
highlighter.value?.loadLanguage(fallbackLang).then(() => {
|
|
registeredLang.value.set(fallbackLang, true)
|
|
})
|
|
})
|
|
return { promise }
|
|
}
|
|
|
|
return { highlighter: highlighter.value }
|
|
}
|
|
|
|
function useShikiTheme() {
|
|
return useColorMode().value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
|
|
}
|
|
|
|
const HTML_ENTITIES = {
|
|
'<': '<',
|
|
'>': '>',
|
|
'&': '&',
|
|
'\'': ''',
|
|
'"': '"',
|
|
} as Record<string, string>
|
|
|
|
function escapeHtml(text: string) {
|
|
return text.replace(/[<>&'"]/g, ch => HTML_ENTITIES[ch])
|
|
}
|
|
|
|
export function highlightCode(code: string, lang: Lang) {
|
|
const { highlighter } = useHighlighter(lang)
|
|
if (!highlighter)
|
|
return escapeHtml(code)
|
|
|
|
return highlighter.codeToHtml(code, {
|
|
lang,
|
|
theme: useShikiTheme(),
|
|
})
|
|
}
|