feat: resolve embedded languages automatically

packages/shiki/src/__tests__/__snapshots__/issues.test.ts.snap

@@ -248,11 +248,55 @@ Array [
       "fontStyle": 0,
     },
     Object {
-      "color": "#A31515",
-      "content": "{a}",
+      "color": "#0000FF",
+      "content": "{",
+      "explanation": Array [
+        Object {
+          "content": "{",
+          "scopes": Array [
+            Object {
+              "scopeName": "source.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.scope.tag.div.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.tag.start.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.directive.let.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "punctuation.section.embedded.begin.svelte",
+              "themeMatches": Array [
+                Object {
+                  "name": "String interpolation",
+                  "scope": Array [
+                    "punctuation.definition.template-expression.begin",
+                    "punctuation.definition.template-expression.end",
+                    "punctuation.section.embedded",
+                  ],
+                  "settings": Object {
+                    "foreground": "#0000ff",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "fontStyle": 0,
+    },
+    Object {
+      "color": "#001080",
+      "content": "a",
       "explanation": Array [
         Object {
-          "content": "{a}",
+          "content": "a",
           "scopes": Array [
             Object {
               "scopeName": "source.svelte",
@@ -271,15 +315,82 @@ Array [
               "themeMatches": Array [],
             },
             Object {
-              "scopeName": "string.unquoted.svelte",
+              "scopeName": "meta.embedded.expression.svelte",
               "themeMatches": Array [
                 Object {
                   "scope": Array [
-                    "string",
-                    "meta.embedded.assembly",
+                    "meta.embedded",
+                    "source.groovy.embedded",
+                    "string meta.image.inline.markdown",
                   ],
                   "settings": Object {
-                    "foreground": "#a31515",
+                    "foreground": "#000000ff",
+                  },
+                },
+              ],
+            },
+            Object {
+              "scopeName": "source.ts",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "variable.other.readwrite.ts",
+              "themeMatches": Array [
+                Object {
+                  "name": "Variable and parameter name",
+                  "scope": Array [
+                    "variable",
+                    "meta.definition.variable.name",
+                    "support.variable",
+                    "entity.name.variable",
+                    "constant.other.placeholder",
+                  ],
+                  "settings": Object {
+                    "foreground": "#001080",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "fontStyle": 0,
+    },
+    Object {
+      "color": "#0000FF",
+      "content": "}",
+      "explanation": Array [
+        Object {
+          "content": "}",
+          "scopes": Array [
+            Object {
+              "scopeName": "source.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.scope.tag.div.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.tag.start.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "meta.directive.let.svelte",
+              "themeMatches": Array [],
+            },
+            Object {
+              "scopeName": "punctuation.section.embedded.end.svelte",
+              "themeMatches": Array [
+                Object {
+                  "name": "String interpolation",
+                  "scope": Array [
+                    "punctuation.definition.template-expression.begin",
+                    "punctuation.definition.template-expression.end",
+                    "punctuation.section.embedded",
+                  ],
+                  "settings": Object {
+                    "foreground": "#0000ff",
                   },
                 },
               ],

packages/shiki/src/__tests__/custom-language/__snapshots__/customLanguage.test.ts.snap

@@ -4,4 +4,4 @@ exports[`Custom language registration can override builtin language: rockstar 1`
 
 exports[`Highlights custom language - Rockstar 1`] = `"<pre class=\\"shiki\\" style=\\"background-color: #2e3440ff\\"><code><span class=\\"line\\"><span style=\\"color: #81A1C1\\">Shiki</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #81A1C1\\">is</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #A3BE8C\\">&quot;a beautiful Syntax Highlighter&quot;</span></span></code></pre>"`;
 
-exports[`Multiple custom language registrations should use last one 1`] = `"<pre class=\\"shiki\\" style=\\"background-color: #2e3440ff\\"><code><span class=\\"line\\"><span style=\\"color: #81A1C1\\">Shiki</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #81A1C1\\">is</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #B48EAD\\">&quot;a beautiful Syntax Highlighter&quot;</span></span></code></pre>"`;
+exports[`Multiple custom language registrations should use last one 1`] = `"<pre class=\\"shiki\\" style=\\"background-color: #2e3440ff\\"><code><span class=\\"line\\"><span style=\\"color: #81A1C1\\">Shiki</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #81A1C1\\">is</span><span style=\\"color: #D8DEE9FF\\"> </span><span style=\\"color: #A3BE8C\\">&quot;a beautiful Syntax Highlighter&quot;</span></span></code></pre>"`;

packages/shiki/src/__tests__/embeddedLanguages.test.ts

@@ -0,0 +1,10 @@
+import { getHighlighter } from '../index'
+
+test('Requesting html as language also loads the embedded languages like JavaScript or CSS', async () => {
+  const highlighter = await getHighlighter({
+    theme: 'nord',
+    langs: ['html']
+  })
+  const languages = highlighter.getLoadedLanguages()
+  expect(languages.sort()).toEqual(['html', 'css', 'javascript', 'js'].sort())
+})

packages/shiki/src/registry.ts

@@ -3,13 +3,18 @@ import { IShikiTheme, IThemeRegistration, ILanguageRegistration } from './types'
 import { fetchTheme, toShikiTheme } from './loader'
 import { Theme } from './themes'
 import { Resolver } from './resolver'
-import { Lang } from './languages'
+import { Lang, languages } from './languages'
 
 export class Registry extends TextMateRegistry {
   public themesPath: string = 'themes/'
 
   private _resolvedThemes: Record<string, IShikiTheme> = {}
   private _resolvedGrammars: Record<string, IGrammar> = {}
+  private _langGraph: Map<string, ILanguageRegistration> = new Map()
+  private _langMap = languages.reduce((acc, lang) => {
+    acc[lang.id] = lang
+    return acc
+  }, {} as Record<string, ILanguageRegistration>)
 
   constructor(private _resolver: Resolver) {
     super(_resolver)
@@ -76,14 +81,32 @@ export class Registry extends TextMateRegistry {
 
   public async loadLanguages(langs: ILanguageRegistration[]) {
     for (const lang of langs) {
+      this.resolveEmbeddedLanguages(lang)
+    }
+
+    const langsGraphArray = Array.from(this._langGraph.values())
+
+    for (const lang of langsGraphArray) {
       this._resolver.addLanguage(lang)
     }
-    for (const lang of langs) {
+    for (const lang of langsGraphArray) {
       await this.loadLanguage(lang)
     }
   }
 
   public getLoadedLanguages() {
     return Object.keys(this._resolvedGrammars) as Lang[]
   }
+
+  private resolveEmbeddedLanguages(lang: ILanguageRegistration) {
+    if (!this._langGraph.has(lang.id)) {
+      this._langGraph.set(lang.id, lang)
+    }
+
+    if (lang.embeddedLangs) {
+      for (const embeddedLang of lang.embeddedLangs) {
+        this._langGraph.set(embeddedLang, this._langMap[embeddedLang])
+      }
+    }
+  }
 }