feat: 删除无用依赖,shiki lang使用懒加载方式加载语言

This commit is contained in:
2026-08-16 13:29:58 +08:00
parent 070a63133d
commit be2e6f1ae0
9 changed files with 54 additions and 1131 deletions

View File

@@ -5,41 +5,37 @@ const DEFAULT_THEME = 'github-dark-dimmed'
const highlighter = await createHighlighter({
themes: [DEFAULT_THEME],
langs: [
"bash",
"json",
"yaml",
"xml",
"html",
"css",
"scss",
"javascript",
"typescript",
"jsx",
"tsx",
"vue",
"markdown",
"sql",
"python",
"go",
"dockerfile",
"nginx"
]
langs: []
})
const resolveLang = (lang: string) => {
const supported = highlighter.getLoadedLanguages?.() || []
if (!lang) return 'text'
if (supported.includes(lang)) return lang
return 'text'
const SUPPORTED_LANGS = [
"bash", "json", "yaml", "xml", "html", "css", "scss",
"javascript", "typescript", "jsx", "tsx", "vue",
"markdown", "sql", "python", "go", "dockerfile", "nginx"
] as const
const loadedLangs = new Set<string>(['text'])
type SupportedLang = typeof SUPPORTED_LANGS[number]
const supportedSet = new Set<string>(SUPPORTED_LANGS)
const ensureLangLoaded = async (lang: string): Promise<string> => {
if (lang === 'text' || loadedLangs.has(lang)) return lang
if (!supportedSet.has(lang)) return 'text'
try {
await highlighter.loadLanguage(lang as SupportedLang)
loadedLangs.add(lang)
return lang
} catch {
return 'text'
}
}
export const processHtmlWithJsdom = async (rawHtml: string) => {
const dom = new JSDOM(rawHtml)
const document = dom.window.document
// 高亮处理代码块
const codeBlocks = document.querySelectorAll('pre code')
for (const codeBlock of codeBlocks) {
@@ -55,9 +51,8 @@ export const processHtmlWithJsdom = async (rawHtml: string) => {
}
}
lang = resolveLang(lang)
lang = await ensureLangLoaded(lang) // ← 唯一改动点:按需加载
// 高亮
const highlighted = highlighter.codeToHtml(codeContent, {
lang,
theme: DEFAULT_THEME,
@@ -116,5 +111,5 @@ export const processHtmlWithJsdom = async (rawHtml: string) => {
}
}
return dom.serialize()
return document.body.innerHTML
}

View File

@@ -140,6 +140,8 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
const article = document.querySelector(".markdown-body")!;
const images = Array.from(article.querySelectorAll("img"));
if(images.length === 0) return
const waitImageLoaded = (img: HTMLImageElement) => {
if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
return Promise.resolve();

View File