feat: support rootStyle: false option (#1184)

Co-authored-by: Anthony Fu <[email protected]>

Author: khushthecoder

packages/core/src/highlight/code-to-hast.ts

@@ -76,7 +76,9 @@ export function codeToHast(
       fg,
       bg,
       themeName,
-      rootStyle,
+      rootStyle: options.rootStyle === false
+        ? false
+        : options.rootStyle ?? rootStyle,
     },
     contextSource,
     grammarState,
@@ -102,24 +104,29 @@ export function tokensToHast(
     tabindex = '0',
   } = options
 
+  const properties: Element['properties'] = {
+    class: `shiki ${options.themeName || ''}`,
+  }
+
+  if (options.rootStyle !== false) {
+    if (options.rootStyle != null)
+      properties.style = options.rootStyle
+    else
+      properties.style = `background-color:${options.bg};color:${options.fg}`
+  }
+
+  if (tabindex !== false && tabindex != null)
+    properties.tabindex = tabindex.toString()
+
+  for (const [key, value] of Object.entries(options.meta || {})) {
+    if (!key.startsWith('_'))
+      properties[key] = value
+  }
+
   let preNode: Element = {
     type: 'element',
     tagName: 'pre',
-    properties: {
-      class: `shiki ${options.themeName || ''}`,
-      style: options.rootStyle || `background-color:${options.bg};color:${options.fg}`,
-      ...(tabindex !== false && tabindex != null)
-        ? {
-            tabindex: tabindex.toString(),
-          }
-        : {},
-      ...Object.fromEntries(
-        Array.from(
-          Object.entries(options.meta || {}),
-        )
-          .filter(([key]) => !key.startsWith('_')),
-      ),
-    },
+    properties,
     children: [],
   }
 

packages/core/test/core.test.ts

@@ -160,6 +160,24 @@ describe('should', () => {
     const code3 = shiki.codeToHtml(ansiCode, { lang: 'lang3', theme: 'nord' })
     expect(code3).toBe(original2)
   })
+
+  it('custom root style', async () => {
+    using shiki = await createHighlighterCore({
+      themes: [nord],
+      langs: [js],
+      engine: createJavaScriptRegexEngine(),
+    })
+
+    // Override root style
+    const code1 = shiki.codeToHtml('console.log("Hi")', { lang: 'javascript', theme: 'nord', rootStyle: 'custom-style:true;' })
+    expect(code1)
+      .toMatchInlineSnapshot(`"<pre class="shiki nord" style="custom-style:true;" 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">"</span><span style="color:#A3BE8C">Hi</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span></code></pre>"`)
+
+    // Disable root style
+    const code2 = shiki.codeToHtml('console.log("Hi")', { lang: 'javascript', theme: 'nord', rootStyle: false })
+    expect(code2)
+      .toMatchInlineSnapshot(`"<pre class="shiki nord" 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">"</span><span style="color:#A3BE8C">Hi</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span></code></pre>"`)
+  })
 })
 
 describe('errors', () => {

packages/types/src/options.ts

@@ -143,9 +143,18 @@ export interface CodeToHastOptionsCommon<Languages extends string = string>
   TransformerOptions,
   DecorationOptions,
   Pick<TokenizeWithThemeOptions, 'colorReplacements' | 'tokenizeMaxLineLength' | 'tokenizeTimeLimit' | 'grammarState' | 'grammarContextCode'> {
-
+  /**
+   * The grammar name for the code.
+   */
   lang: StringLiteralUnion<Languages | SpecialLanguage>
 
+  /**
+   * Custom style string to be applied to the root `<pre>` element.
+   *
+   * When set to `false`, no style will be applied.
+   */
+  rootStyle?: string | false
+
   /**
    * Merge whitespace tokens to saving extra `<span>`.
    *

packages/types/src/tokens.ts

@@ -242,7 +242,7 @@ export interface TokensResult {
    * Custom style string to be applied to the root `<pre>` element.
    * When specified, `fg` and `bg` will be ignored.
    */
-  rootStyle?: string
+  rootStyle?: string | false
 
   /**
    * The last grammar state of the code snippet.