feat: support no default color for dual themes, #6

shikijs · Aug 13, 2023 · 69b99c8 · 69b99c8
1 parent 4c00f5e
commit 69b99c8
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 23 deletions.
diff --git a/src/core/index.ts b/src/core/index.ts
@@ -128,9 +128,12 @@ export async function getHighlighterCore(options: HighlighterCoreOptions) {
       getTheme(theme)._theme,
     ] as [string, ThemedToken[][], ThemeRegisteration])
 
-    return renderToHtmlDualThemes(tokens, cssVariablePrefix, {
-      lineOptions: options?.lineOptions,
-    })
+    return renderToHtmlDualThemes(
+      tokens,
+      cssVariablePrefix,
+      defaultColor !== false,
+      options,
+    )
   }
 
   async function loadLanguage(...langs: LanguageInput[]) {

diff --git a/src/core/renderer-html-dual-themes.ts b/src/core/renderer-html-dual-themes.ts
@@ -57,6 +57,7 @@ export function _syncThemedTokens(...themes: ThemedToken[][][]) {
 export function renderToHtmlDualThemes(
   themes: [string, ThemedToken[][], ThemeRegisteration][],
   cssVariablePrefix = '--shiki-',
+  defaultColor = true,
   options: HtmlRendererOptions = {},
 ) {
   const synced = _syncThemedTokens(...themes.map(t => t[1]))
@@ -68,18 +69,22 @@ export function renderToHtmlDualThemes(
     merged.push(lineout)
     for (let j = 0; j < lines[0].length; j++) {
       const tokens = lines.map(t => t[j])
-      const colors = tokens.map((t, idx) => `${idx === 0 ? '' : `${cssVariablePrefix + themes[idx][0]}:`}${t.color || 'inherit'}`).join(';')
+      const colors = tokens.map((t, idx) => `${idx === 0 && defaultColor ? '' : `${cssVariablePrefix + themes[idx][0]}:`}${t.color || 'inherit'}`).join(';')
       lineout.push({
         ...tokens[0],
         color: colors,
+        htmlStyle: defaultColor ? undefined : colors,
       })
     }
   }
 
+  const fg = themes.map((t, idx) => (idx === 0 && defaultColor ? '' : `${cssVariablePrefix + t[0]}:`) + t[2].fg).join(';')
+  const bg = themes.map((t, idx) => (idx === 0 && defaultColor ? '' : `${cssVariablePrefix + t[0]}-bg:`) + t[2].bg).join(';')
   return renderToHtml(merged, {
     ...options,
-    fg: themes.map((t, idx) => (idx === 0 ? '' : `${cssVariablePrefix + t[0]}:`) + t[2].fg).join(';'),
-    bg: themes.map((t, idx) => (idx === 0 ? '' : `${cssVariablePrefix + t[0]}-bg:`) + t[2].bg).join(';'),
+    fg,
+    bg,
     themeName: `shiki-dual-themes ${themes.map(t => t[2].name).join(' ')}`,
+    rootStyle: defaultColor ? undefined : [fg, bg].join(';'),
   })
 }
diff --git a/src/core/renderer-html.ts b/src/core/renderer-html.ts
@@ -39,7 +39,10 @@ export function renderToHtml(lines: ThemedToken[][], options: HtmlRendererOption
 
   return h(
     'pre',
-    { className: `shiki ${options.themeName || ''}`, style: `background-color: ${bg}; color: ${fg}` },
+    {
+      className: `shiki ${options.themeName || ''}`,
+      style: options.rootStyle || `background-color:${bg};color:${fg}`,
+    },
     [
       options.langId ? `<div class="language-id">${options.langId}</div>` : '',
       h(
@@ -58,16 +61,14 @@ export function renderToHtml(lines: ThemedToken[][], options: HtmlRendererOption
               index,
             },
             line.map((token, index) => {
-              const cssDeclarations = [`color: ${token.color || options.fg}`]
+              const cssDeclarations = [token.htmlStyle || `color:${token.color || options.fg}`]
               if (token.fontStyle) {
                 if (token.fontStyle & FontStyle.Italic)
-                  cssDeclarations.push('font-style: italic')
-
+                  cssDeclarations.push('font-style:italic')
                 if (token.fontStyle & FontStyle.Bold)
-                  cssDeclarations.push('font-weight: bold')
-
+                  cssDeclarations.push('font-weight:bold')
                 if (token.fontStyle & FontStyle.Underline)
-                  cssDeclarations.push('text-decoration: underline')
+                  cssDeclarations.push('text-decoration:underline')
               }
 
               return h(

diff --git a/src/types.ts b/src/types.ts
@@ -75,15 +75,22 @@ export interface CodeToHtmlDualThemesOptions<Languages = string, Themes = string
    * The rest of the themes are applied via CSS variables, and toggled by CSS overrides.
    *
    * For example, if `defaultColor` is `light`, then `light` theme is applied to the code,
-   * and the `dark` theme and other custom themes are applied via CSS variables.
+   * and the `dark` theme and other custom themes are applied via CSS variables:
    *
    * ```html
    * <span style="color:#{light};--shiki-dark:#{dark};--shiki-custom:#{custom};">code</span>
    * ```
    *
+   * When set to `false`, no default styles will be applied, and totally up to users to apply the styles:
+   *
+   * ```html
+   * <span style="--shiki-light:#{light};--shiki-dark:#{dark};--shiki-custom:#{custom};">code</span>
+   * ```
+   *
+   *
    * @default 'light'
    */
-  defaultColor?: StringLiteralUnion<'light' | 'dark'>
+  defaultColor?: StringLiteralUnion<'light' | 'dark'> | false
 
   /**
    * Prefix of CSS variables used to store the color of the other theme.
@@ -163,6 +170,11 @@ export interface HtmlRendererOptions {
   lineOptions?: LineOption[]
   elements?: ElementsOptions
   themeName?: string
+  /**
+   * Custom style string to be applied to the root `<pre>` element.
+   * When specified, `fg` and `bg` will be ignored.
+   */
+  rootStyle?: string
 }
 
 export interface ElementsOptions {
@@ -270,6 +282,11 @@ export interface ThemedToken {
    * 6 or 8 digit hex code representation of the token's color
    */
   color?: string
+  /**
+   * Override with custom inline style for HTML renderer.
+   * When specified, `color` will be ignored.
+   */
+  htmlStyle?: string
   /**
    * Font style of token. Can be None/Italic/Bold/Underline
    */

diff --git a/test/core.test.ts b/test/core.test.ts
@@ -18,7 +18,7 @@ describe('should', () => {
     })
 
     expect(shiki.codeToHtml('console.log("Hi")', { lang: 'javascript' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki nord\\" style=\\"background-color: #2e3440ff; color: #2e3440ff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #D8DEE9\\">console</span><span style=\\"color: #ECEFF4\\">.</span><span style=\\"color: #88C0D0\\">log</span><span style=\\"color: #D8DEE9FF\\">(</span><span style=\\"color: #ECEFF4\\">&quot;</span><span style=\\"color: #A3BE8C\\">Hi</span><span style=\\"color: #ECEFF4\\">&quot;</span><span style=\\"color: #D8DEE9FF\\">)</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki nord\\" style=\\"background-color:#2e3440ff;color:#2e3440ff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#D8DEE9\\">console</span><span style=\\"color:#ECEFF4\\">.</span><span style=\\"color:#88C0D0\\">log</span><span style=\\"color:#D8DEE9FF\\">(</span><span style=\\"color:#ECEFF4\\">&quot;</span><span style=\\"color:#A3BE8C\\">Hi</span><span style=\\"color:#ECEFF4\\">&quot;</span><span style=\\"color:#D8DEE9FF\\">)</span></span></code></pre>"')
   })
 
   it('dynamic load theme and lang', async () => {
@@ -55,7 +55,7 @@ describe('should', () => {
       `)
 
     expect(shiki.codeToHtml('print 1', { lang: 'python', theme: 'vitesse-light' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color: #ffffff; color: #ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #998418\\">print</span><span style=\\"color: #393A34\\"> </span><span style=\\"color: #2F798A\\">1</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color:#ffffff;color:#ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#998418\\">print</span><span style=\\"color:#393A34\\"> </span><span style=\\"color:#2F798A\\">1</span></span></code></pre>"')
   })
 
   it('requires nested lang', async () => {

diff --git a/test/dual-themes.test.ts b/test/dual-themes.test.ts
@@ -140,4 +140,79 @@ function toggleTheme() {
     expect(snippet + code)
       .toMatchFileSnapshot('./out/multiple-themes.html')
   })
+
+  it('multiple themes without default', async () => {
+    const code = await codeToHtmlDualThemes('console.log("hello")', {
+      lang: 'js',
+      themes: {
+        'light': 'vitesse-light',
+        'dark': 'vitesse-dark',
+        'nord': 'nord',
+        'min-dark': 'min-dark',
+        'min-light': 'min-light',
+      },
+      defaultColor: false,
+      cssVariablePrefix: '--s-',
+    })
+
+    const snippet = `
+<style>
+.shiki {
+  padding: 0.5em;
+  border-radius: 0.25em;
+}
+
+.shiki {
+  background-color: var(--s-light-bg);
+  color: var(--s-light);
+}
+.shiki span {
+  color: var(--s-light)
+}
+
+[data-theme="dark"] .shiki {
+  background-color: var(--s-dark-bg);
+  color: var(--s-dark);
+}
+[data-theme="dark"] .shiki span {
+  color: var(--s-dark);
+}
+
+[data-theme="nord"] .shiki {
+  background-color: var(--s-nord-bg);
+  color: var(--s-nord);
+}
+[data-theme="nord"] .shiki span {
+  color: var(--s-nord);
+}
+
+[data-theme="min-dark"] .shiki {
+  background-color: var(--s-min-dark-bg);
+  color: var(--s-min-dark);
+}
+[data-theme="min-dark"] .shiki span {
+  color: var(--s-min-dark);
+}
+
+[data-theme="min-light"] .shiki {
+  background-color: var(--s-min-light-bg);
+  color: var(--s-min-light);
+}
+[data-theme="min-light"] .shiki span {
+  color: var(--s-min-light);
+}
+</style>
+<script>
+const themes = ['light', 'dark', 'nord', 'min-dark', 'min-light']
+
+function toggleTheme() {
+  document.body.dataset.theme = themes[(Math.max(themes.indexOf(document.body.dataset.theme), 0) + 1) % themes.length]
+}
+</script>
+<button onclick="toggleTheme()">Toggle theme</button>
+`
+
+    expect(snippet + code)
+      .toMatchFileSnapshot('./out/multiple-themes-no-default.html')
+  })
 })
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -9,7 +9,7 @@ describe('should', () => {
     })
 
     expect(shiki.codeToHtml('console.log', { lang: 'js' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color: #ffffff; color: #ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #B07D48\\">console</span><span style=\\"color: #999999\\">.</span><span style=\\"color: #B07D48\\">log</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color:#ffffff;color:#ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#B07D48\\">console</span><span style=\\"color:#999999\\">.</span><span style=\\"color:#B07D48\\">log</span></span></code></pre>"')
   })
 
   it('dynamic load theme and lang', async () => {
@@ -41,7 +41,7 @@ describe('should', () => {
       `)
 
     expect(shiki.codeToHtml('print 1', { lang: 'python', theme: 'min-dark' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki min-dark\\" style=\\"background-color: #1f1f1f; color: #1f1f1f\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #B392F0\\">print </span><span style=\\"color: #F8F8F8\\">1</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki min-dark\\" style=\\"background-color:#1f1f1f;color:#1f1f1f\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#B392F0\\">print </span><span style=\\"color:#F8F8F8\\">1</span></span></code></pre>"')
   })
 
   it('requires nested lang', async () => {

diff --git a/test/out/dual-themes.html b/test/out/dual-themes.html
@@ -9,4 +9,4 @@
 }
 </style>
 <button onclick="document.body.classList.toggle('dark')">Toggle theme</button>
-<pre class="shiki shiki-dual-themes min-light nord" style="background-color: #ffffff;--shiki-dark-bg:#2e3440ff; color: #ffffff;--shiki-dark-bg:#2e3440ff" tabindex="0"><code><span class="line"><span style="color: #1976D2;--shiki-dark:#D8DEE9">console</span><span style="color: #6F42C1;--shiki-dark:#ECEFF4">.</span><span style="color: #6F42C1;--shiki-dark:#88C0D0">log</span><span style="color: #24292EFF;--shiki-dark:#D8DEE9FF">(</span><span style="color: #22863A;--shiki-dark:#ECEFF4">&quot;</span><span style="color: #22863A;--shiki-dark:#A3BE8C">hello</span><span style="color: #22863A;--shiki-dark:#ECEFF4">&quot;</span><span style="color: #24292EFF;--shiki-dark:#D8DEE9FF">)</span></span></code></pre>
+<pre class="shiki shiki-dual-themes min-light nord" style="background-color:#ffffff;--shiki-dark-bg:#2e3440ff;color:#ffffff;--shiki-dark-bg:#2e3440ff" tabindex="0"><code><span class="line"><span style="color:#1976D2;--shiki-dark:#D8DEE9">console</span><span style="color:#6F42C1;--shiki-dark:#ECEFF4">.</span><span style="color:#6F42C1;--shiki-dark:#88C0D0">log</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">(</span><span style="color:#22863A;--shiki-dark:#ECEFF4">&quot;</span><span style="color:#22863A;--shiki-dark:#A3BE8C">hello</span><span style="color:#22863A;--shiki-dark:#ECEFF4">&quot;</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">)</span></span></code></pre>
diff --git a/test/out/multiple-themes-no-default.html b/test/out/multiple-themes-no-default.html
@@ -0,0 +1,56 @@
+
+<style>
+.shiki {
+  padding: 0.5em;
+  border-radius: 0.25em;
+}
+
+.shiki {
+  background-color: var(--s-light-bg);
+  color: var(--s-light);
+}
+.shiki span {
+  color: var(--s-light)
+}
+
+[data-theme="dark"] .shiki {
+  background-color: var(--s-dark-bg);
+  color: var(--s-dark);
+}
+[data-theme="dark"] .shiki span {
+  color: var(--s-dark);
+}
+
+[data-theme="nord"] .shiki {
+  background-color: var(--s-nord-bg);
+  color: var(--s-nord);
+}
+[data-theme="nord"] .shiki span {
+  color: var(--s-nord);
+}
+
+[data-theme="min-dark"] .shiki {
+  background-color: var(--s-min-dark-bg);
+  color: var(--s-min-dark);
+}
+[data-theme="min-dark"] .shiki span {
+  color: var(--s-min-dark);
+}
+
+[data-theme="min-light"] .shiki {
+  background-color: var(--s-min-light-bg);
+  color: var(--s-min-light);
+}
+[data-theme="min-light"] .shiki span {
+  color: var(--s-min-light);
+}
+</style>
+<script>
+const themes = ['light', 'dark', 'nord', 'min-dark', 'min-light']
+
+function toggleTheme() {
+  document.body.dataset.theme = themes[(Math.max(themes.indexOf(document.body.dataset.theme), 0) + 1) % themes.length]
+}
+</script>
+<button onclick="toggleTheme()">Toggle theme</button>
+<pre class="shiki shiki-dual-themes vitesse-light vitesse-dark nord min-dark min-light" style="--s-light:#393a34;--s-dark:#dbd7caee;--s-nord:#d8dee9ff;--s-min-dark:#b392f0;--s-min-light:#24292eff;--s-light-bg:#ffffff;--s-dark-bg:#121212;--s-nord-bg:#2e3440ff;--s-min-dark-bg:#1f1f1f;--s-min-light-bg:#ffffff" tabindex="0"><code><span class="line"><span style="--s-light:#B07D48;--s-dark:#BD976A;--s-nord:#D8DEE9;--s-min-dark:#79B8FF;--s-min-light:#1976D2">console</span><span style="--s-light:#999999;--s-dark:#666666;--s-nord:#ECEFF4;--s-min-dark:#B392F0;--s-min-light:#6F42C1">.</span><span style="--s-light:#59873A;--s-dark:#80A665;--s-nord:#88C0D0;--s-min-dark:#B392F0;--s-min-light:#6F42C1">log</span><span style="--s-light:#999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">(</span><span style="--s-light:#B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="--s-light:#B56959;--s-dark:#C98A7D;--s-nord:#A3BE8C;--s-min-dark:#FFAB70;--s-min-light:#22863A">hello</span><span style="--s-light:#B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="--s-light:#999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">)</span></span></code></pre>
diff --git a/test/out/multiple-themes.html b/test/out/multiple-themes.html
@@ -45,4 +45,4 @@
 }
 </script>
 <button onclick="toggleTheme()">Toggle theme</button>
-<pre class="shiki shiki-dual-themes vitesse-light vitesse-dark nord min-dark min-light" style="background-color: #ffffff;--s-dark-bg:#121212;--s-nord-bg:#2e3440ff;--s-min-dark-bg:#1f1f1f;--s-min-light-bg:#ffffff; color: #ffffff;--s-dark-bg:#121212;--s-nord-bg:#2e3440ff;--s-min-dark-bg:#1f1f1f;--s-min-light-bg:#ffffff" tabindex="0"><code><span class="line"><span style="color: #B07D48;--s-dark:#BD976A;--s-nord:#D8DEE9;--s-min-dark:#79B8FF;--s-min-light:#1976D2">console</span><span style="color: #999999;--s-dark:#666666;--s-nord:#ECEFF4;--s-min-dark:#B392F0;--s-min-light:#6F42C1">.</span><span style="color: #59873A;--s-dark:#80A665;--s-nord:#88C0D0;--s-min-dark:#B392F0;--s-min-light:#6F42C1">log</span><span style="color: #999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">(</span><span style="color: #B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="color: #B56959;--s-dark:#C98A7D;--s-nord:#A3BE8C;--s-min-dark:#FFAB70;--s-min-light:#22863A">hello</span><span style="color: #B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="color: #999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">)</span></span></code></pre>
+<pre class="shiki shiki-dual-themes vitesse-light vitesse-dark nord min-dark min-light" style="background-color:#ffffff;--s-dark-bg:#121212;--s-nord-bg:#2e3440ff;--s-min-dark-bg:#1f1f1f;--s-min-light-bg:#ffffff;color:#ffffff;--s-dark-bg:#121212;--s-nord-bg:#2e3440ff;--s-min-dark-bg:#1f1f1f;--s-min-light-bg:#ffffff" tabindex="0"><code><span class="line"><span style="color:#B07D48;--s-dark:#BD976A;--s-nord:#D8DEE9;--s-min-dark:#79B8FF;--s-min-light:#1976D2">console</span><span style="color:#999999;--s-dark:#666666;--s-nord:#ECEFF4;--s-min-dark:#B392F0;--s-min-light:#6F42C1">.</span><span style="color:#59873A;--s-dark:#80A665;--s-nord:#88C0D0;--s-min-dark:#B392F0;--s-min-light:#6F42C1">log</span><span style="color:#999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">(</span><span style="color:#B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="color:#B56959;--s-dark:#C98A7D;--s-nord:#A3BE8C;--s-min-dark:#FFAB70;--s-min-light:#22863A">hello</span><span style="color:#B5695999;--s-dark:#C98A7D99;--s-nord:#ECEFF4;--s-min-dark:#FFAB70;--s-min-light:#22863A">&quot;</span><span style="color:#999999;--s-dark:#666666;--s-nord:#D8DEE9FF;--s-min-dark:#B392F0;--s-min-light:#24292EFF">)</span></span></code></pre>
diff --git a/test/singleton.test.ts b/test/singleton.test.ts
@@ -4,10 +4,10 @@ import { codeToHtml, codeToThemedTokens } from '../src'
 describe('should', () => {
   it('codeToHtml', async () => {
     expect(await codeToHtml('console.log("hello")', { lang: 'js', theme: 'vitesse-light' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color: #ffffff; color: #ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #B07D48\\">console</span><span style=\\"color: #999999\\">.</span><span style=\\"color: #59873A\\">log</span><span style=\\"color: #999999\\">(</span><span style=\\"color: #B5695999\\">&quot;</span><span style=\\"color: #B56959\\">hello</span><span style=\\"color: #B5695999\\">&quot;</span><span style=\\"color: #999999\\">)</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki vitesse-light\\" style=\\"background-color:#ffffff;color:#ffffff\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#B07D48\\">console</span><span style=\\"color:#999999\\">.</span><span style=\\"color:#59873A\\">log</span><span style=\\"color:#999999\\">(</span><span style=\\"color:#B5695999\\">&quot;</span><span style=\\"color:#B56959\\">hello</span><span style=\\"color:#B5695999\\">&quot;</span><span style=\\"color:#999999\\">)</span></span></code></pre>"')
 
     expect(await codeToHtml('<div class="foo">bar</div>', { lang: 'html', theme: 'min-dark' }))
-      .toMatchInlineSnapshot('"<pre class=\\"shiki min-dark\\" style=\\"background-color: #1f1f1f; color: #1f1f1f\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color: #B392F0\\">&lt;</span><span style=\\"color: #FFAB70\\">div</span><span style=\\"color: #B392F0\\"> class</span><span style=\\"color: #F97583\\">=</span><span style=\\"color: #FFAB70\\">&quot;foo&quot;</span><span style=\\"color: #B392F0\\">&gt;bar&lt;/</span><span style=\\"color: #FFAB70\\">div</span><span style=\\"color: #B392F0\\">&gt;</span></span></code></pre>"')
+      .toMatchInlineSnapshot('"<pre class=\\"shiki min-dark\\" style=\\"background-color:#1f1f1f;color:#1f1f1f\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#B392F0\\">&lt;</span><span style=\\"color:#FFAB70\\">div</span><span style=\\"color:#B392F0\\"> class</span><span style=\\"color:#F97583\\">=</span><span style=\\"color:#FFAB70\\">&quot;foo&quot;</span><span style=\\"color:#B392F0\\">&gt;bar&lt;/</span><span style=\\"color:#FFAB70\\">div</span><span style=\\"color:#B392F0\\">&gt;</span></span></code></pre>"')
   })
 
   it('codeToThemedTokens', async () => {