elk/composables/shiki.ts

44 lines
1 KiB
TypeScript
Raw Normal View History

2022-11-24 06:42:03 +03:00
import type { Highlighter, Lang } from 'shiki'
export const shiki = ref<Highlighter>()
const registeredLang = ref(new Map<string, boolean>())
let shikiImport: Promise<void> | undefined
export function highlightCode(code: string, lang: Lang) {
if (!shikiImport) {
shikiImport = import('shiki')
.then(async (r) => {
r.setCDN('/shiki/')
shiki.value = await r.getHighlighter({
themes: [
'vitesse-dark',
'vitesse-light',
],
2022-11-25 10:55:54 +03:00
langs: [],
2022-11-24 06:42:03 +03:00
})
})
}
if (!shiki.value)
return code
if (!registeredLang.value.get(lang)) {
shiki.value.loadLanguage(lang)
.then(() => {
registeredLang.value.set(lang, true)
})
2022-11-24 11:57:24 +03:00
.catch((e) => {
console.error(`[shiki] Failed to load language ${lang}`)
console.error(e)
registeredLang.value.set(lang, false)
})
2022-11-24 06:42:03 +03:00
return code
}
return shiki.value.codeToHtml(code, {
lang,
theme: isDark.value ? 'vitesse-dark' : 'vitesse-light',
})
}