fix: upgrade shiki, remove embedded languages workaround (#4566)

Author: antfu

docs/.vitepress/config/shared.ts

@@ -24,9 +24,6 @@ export const shared = defineConfig({
 
   markdown: {
     math: true,
-    // Load these languages ahead of time for embedded code highlighting
-    // TODO: remove this when Shiki fixes markdown embedded language loading
-    languages: ['js', 'ts', 'html', 'vue-html', 'css', 'yaml', 'sh'],
     codeTransformers: [
       // We use `[!!code` in demo to prevent transformation, here we revert it back.
       {

package.json

@@ -98,9 +98,9 @@
     "@docsearch/css": "^3.8.3",
     "@docsearch/js": "^3.8.3",
     "@iconify-json/simple-icons": "^1.2.24",
-    "@shikijs/core": "^2.3.2",
-    "@shikijs/transformers": "^2.3.2",
-    "@shikijs/types": "^2.3.2",
+    "@shikijs/core": "^2.4.1",
+    "@shikijs/transformers": "^2.4.1",
+    "@shikijs/types": "^2.4.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/devtools-api": "^7.7.2",
     "@vue/shared": "^3.5.13",
@@ -109,7 +109,7 @@
     "focus-trap": "^7.6.4",
     "mark.js": "8.11.1",
     "minisearch": "^7.1.1",
-    "shiki": "^2.3.2",
+    "shiki": "^2.4.1",
     "vite": "^6.1.0",
     "vue": "^3.5.13"
   },

pnpm-lock.yaml

@@ -7,8 +7,8 @@ import {
   type TransformerCompactLineOption
 } from '@shikijs/transformers'
 import { customAlphabet } from 'nanoid'
-import type { LanguageRegistration, ShikiTransformer } from 'shiki'
-import { createHighlighter, isSpecialLang } from 'shiki'
+import type { ShikiTransformer, BundledLanguage } from 'shiki'
+import { createHighlighter, guessEmbeddedLanguages } from 'shiki'
 import type { Logger } from 'vite'
 import type { MarkdownOptions, ThemeOptions } from '../markdown'
 import c from 'picocolors'
@@ -71,16 +71,6 @@ export async function highlight(
     langAlias: options.languageAlias
   })
 
-  async function loadLanguage(name: string | LanguageRegistration) {
-    const lang = typeof name === 'string' ? name : name.name
-    if (
-      !isSpecialLang(lang) &&
-      !highlighter.getLoadedLanguages().includes(lang)
-    ) {
-      await highlighter.loadLanguage(lang as any)
-    }
-  }
-
   await options?.shikiSetup?.(highlighter)
 
   // TODO: remove explicit matchAlgorithm in shiki v3
@@ -129,7 +119,7 @@ export async function highlight(
           .toLowerCase() || defaultLang
 
       try {
-        await loadLanguage(lang)
+        await highlighter.loadLanguage(lang as any)
       } catch {
         logger.warn(
           c.yellow(
@@ -163,6 +153,9 @@ export async function highlight(
 
       str = removeMustache(str).trimEnd()
 
+      const embeddedLang = guessEmbeddedLanguages(str, lang, highlighter)
+      await highlighter.loadLanguage(...(embeddedLang as BundledLanguage[]))
+
       const highlighted = highlighter.codeToHtml(str, {
         lang,
         transformers: [