fix(shiki): astro partial syntax highlighting error (#1035)

yvbopeng · antfu · web-flow · commit a12f7e70512c · 2025-06-20T10:28:33.000+09:00
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/langs/scripts/langs.ts b/packages/langs/scripts/langs.ts
@@ -18,36 +18,53 @@ export const LANGS_LAZY_EMBEDDED_ALL = {
  * Single-file-component-like languages that have embedded langs
  * For these langs, we exclude the standalone embedded langs from the main bundle
  */
-export const LANGS_LAZY_EMBEDDED_PARTIAL = [
-  'vue',
-  'vue-html',
-  'svelte',
-  'pug',
-  'haml',
-  'astro',
-]
-
-/**
- * Languages to be excluded from SFC langs
- */
-export const STANDALONE_LANGS_EMBEDDED = [
-  'pug',
-  'stylus',
-  'sass',
-  'scss',
-  'coffee',
-  'jsonc',
-  'json5',
-  'yaml',
-  'toml',
-  'scss',
-  'graphql',
-  'markdown',
-  'less',
-  'jsx',
-  'tsx',
-  'ruby',
-]
+export const LANGS_LAZY_EMBEDDED_PARTIAL = {
+  'vue': [
+    'markdown',
+    'pug',
+    'stylus',
+    'sass',
+    'scss',
+    'less',
+    'jsx',
+    'tsx',
+    'coffee',
+    'jsonc',
+    'json5',
+    'yaml',
+    'toml',
+    'graphql',
+  ],
+  'vue-html': [],
+  'svelte': [
+    'coffee',
+    'stylus',
+    'sass',
+    'scss',
+    'less',
+    'pug',
+    'markdown',
+  ],
+  'pug': [
+    'sass',
+    'scss',
+    'stylus',
+    'coffee',
+  ],
+  'haml': [
+    'ruby',
+    'sass',
+    'coffee',
+    'markdown',
+  ],
+  // Since Astro is a extension of MDX, we don't exclude `jsx` here.
+  'astro': [
+    'sass',
+    'scss',
+    'stylus',
+    'less',
+  ],
+} as Record<string, string[]>
 
 export async function loadLangs() {
   const allLangFiles = await fg('*.json', {
@@ -83,9 +100,10 @@ export async function loadLangs() {
       json.embeddedLangsLazy = (json.embeddedLangs || []).filter(i => !includes.includes(i)) || []
       json.embeddedLangs = includes
     }
-    else if (LANGS_LAZY_EMBEDDED_PARTIAL.includes(lang.name)) {
-      json.embeddedLangsLazy = (json.embeddedLangs || []).filter(i => STANDALONE_LANGS_EMBEDDED.includes(i)) || []
-      json.embeddedLangs = (json.embeddedLangs || []).filter(i => !STANDALONE_LANGS_EMBEDDED.includes(i)) || []
+    else if (LANGS_LAZY_EMBEDDED_PARTIAL[lang.name]) {
+      const includes = LANGS_LAZY_EMBEDDED_PARTIAL[lang.name]
+      json.embeddedLangsLazy = includes
+      json.embeddedLangs = (json.embeddedLangs || []).filter(i => !includes.includes(i)) || []
     }
 
     resolvedLangs.push(json)
diff --git a/packages/shiki/test/astro.test.ts b/packages/shiki/test/astro.test.ts
@@ -0,0 +1,26 @@
+import { createHighlighter } from 'shiki'
+import { describe, expect, it } from 'vitest'
+
+describe('should', async () => {
+  it('astro syntax highlighting', async () => {
+    const highlighter = await createHighlighter({
+      langs: ['astro'],
+      themes: ['vitesse-dark'],
+    })
+    const code = `---
+const title = "Astro";
+---
+
+<p>{title}</p>
+`
+    expect(highlighter.codeToHtml(code, { lang: 'astro', theme: 'vitesse-dark' })).toMatchInlineSnapshot(`
+      "<pre class="shiki vitesse-dark" style="background-color:#121212;color:#dbd7caee" tabindex="0"><code><span class="line"><span style="color:#758575DD">---</span></span>
+      <span class="line"><span style="color:#CB7676">const </span><span style="color:#BD976A">title</span><span style="color:#666666"> =</span><span style="color:#C98A7D77"> "</span><span style="color:#C98A7D">Astro</span><span style="color:#C98A7D77">"</span><span style="color:#666666">;</span></span>
+      <span class="line"><span style="color:#758575DD">---</span></span>
+      <span class="line"></span>
+      <span class="line"><span style="color:#666666">&#x3C;</span><span style="color:#4D9375">p</span><span style="color:#666666">>{</span><span style="color:#BD976A">title</span><span style="color:#666666">}&#x3C;/</span><span style="color:#4D9375">p</span><span style="color:#666666">></span></span>
+      <span class="line"></span></code></pre>"
+    `)
+    highlighter.dispose()
+  })
+})
