feat(transformers): add classActiveCode option to notation transformers (#1171)

Author: GreenHacker420

packages/transformers/src/transformers/notation-diff.ts

@@ -15,6 +15,10 @@ export interface TransformerNotationDiffOptions extends MatchAlgorithmOptions {
    * Class added to the <pre> element when the current code has diff
    */
   classActivePre?: string
+  /**
+   * Class added to the <code> element when the current code has diff
+   */
+  classActiveCode?: string
 }
 
 /**
@@ -27,6 +31,7 @@ export function transformerNotationDiff(
     classLineAdd = 'diff add',
     classLineRemove = 'diff remove',
     classActivePre = 'has-diff',
+    classActiveCode,
   } = options
 
   return transformerNotationMap(
@@ -36,6 +41,7 @@ export function transformerNotationDiff(
         '--': classLineRemove,
       },
       classActivePre,
+      classActiveCode,
       matchAlgorithm: options.matchAlgorithm,
     },
     '@shikijs/transformers:notation-diff',

packages/transformers/src/transformers/notation-error-level.ts

@@ -8,6 +8,10 @@ export interface TransformerNotationErrorLevelOptions extends MatchAlgorithmOpti
    * Class added to the <pre> element when the current code has diff
    */
   classActivePre?: string
+  /**
+   * Class added to the <code> element when the current code has diff
+   */
+  classActiveCode?: string
 }
 
 /**
@@ -22,12 +26,14 @@ export function transformerNotationErrorLevel(
       warning: ['highlighted', 'warning'],
     },
     classActivePre = 'has-highlighted',
+    classActiveCode,
   } = options
 
   return transformerNotationMap(
     {
       classMap,
       classActivePre,
+      classActiveCode,
       matchAlgorithm: options.matchAlgorithm,
     },
     '@shikijs/transformers:notation-error-level',

packages/transformers/src/transformers/notation-focus.ts

@@ -11,6 +11,10 @@ export interface TransformerNotationFocusOptions extends MatchAlgorithmOptions {
    * Class added to the root element when the code has focused lines
    */
   classActivePre?: string
+  /**
+   * Class added to the <code> element when the code has focused lines
+   */
+  classActiveCode?: string
 }
 
 /**
@@ -22,6 +26,7 @@ export function transformerNotationFocus(
   const {
     classActiveLine = 'focused',
     classActivePre = 'has-focused',
+    classActiveCode,
   } = options
 
   return transformerNotationMap(
@@ -30,6 +35,7 @@ export function transformerNotationFocus(
         focus: classActiveLine,
       },
       classActivePre,
+      classActiveCode,
       matchAlgorithm: options.matchAlgorithm,
     },
     '@shikijs/transformers:notation-focus',

packages/transformers/src/transformers/notation-highlight.ts

@@ -11,6 +11,10 @@ export interface TransformerNotationHighlightOptions extends MatchAlgorithmOptio
    * Class added to the root element when the code has highlighted lines
    */
   classActivePre?: string
+  /**
+   * Class added to the <code> element when the code has highlighted lines
+   */
+  classActiveCode?: string
 }
 
 /**
@@ -22,6 +26,7 @@ export function transformerNotationHighlight(
   const {
     classActiveLine = 'highlighted',
     classActivePre = 'has-highlighted',
+    classActiveCode,
   } = options
 
   return transformerNotationMap(
@@ -31,6 +36,7 @@ export function transformerNotationHighlight(
         hl: classActiveLine,
       },
       classActivePre,
+      classActiveCode,
       matchAlgorithm: options.matchAlgorithm,
     },
     '@shikijs/transformers:notation-highlight',

packages/transformers/src/transformers/notation-map.ts

@@ -8,6 +8,10 @@ export interface TransformerNotationMapOptions extends MatchAlgorithmOptions {
    * Class added to the <pre> element when the current code has diff
    */
   classActivePre?: string
+  /**
+   * Class added to the <code> element when the current code has diff
+   */
+  classActiveCode?: string
 }
 
 function escapeRegExp(str: string): string {
@@ -21,6 +25,7 @@ export function transformerNotationMap(
   const {
     classMap = {},
     classActivePre = undefined,
+    classActiveCode = undefined,
   } = options
 
   return createCommentNotationTransformer(
@@ -35,6 +40,8 @@ export function transformerNotationMap(
 
       if (classActivePre)
         this.addClassToHast(this.pre, classActivePre)
+      if (classActiveCode)
+        this.addClassToHast(this.code, classActiveCode)
       return true
     },
     options.matchAlgorithm,

packages/transformers/test/class-active-code.test.ts

@@ -0,0 +1,109 @@
+import { codeToHtml } from 'shiki'
+import { describe, expect, it } from 'vitest'
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+} from '../src'
+
+describe('classActiveCode option', () => {
+  it('transformerNotationDiff adds class to code element', async () => {
+    const code = `console.log('hello') // [!code ++]`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationDiff({
+          classActiveCode: 'has-diff-code',
+        }),
+      ],
+    })
+
+    expect(html).toContain('class="has-diff-code"')
+    expect(html).toContain('<code class="has-diff-code">')
+  })
+
+  it('transformerNotationFocus adds class to code element', async () => {
+    const code = `console.log('hello') // [!code focus]`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationFocus({
+          classActiveCode: 'has-focus-code',
+        }),
+      ],
+    })
+
+    expect(html).toContain('<code class="has-focus-code">')
+  })
+
+  it('transformerNotationHighlight adds class to code element', async () => {
+    const code = `console.log('hello') // [!code highlight]`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationHighlight({
+          classActiveCode: 'has-highlight-code',
+        }),
+      ],
+    })
+
+    expect(html).toContain('<code class="has-highlight-code">')
+  })
+
+  it('transformerNotationErrorLevel adds class to code element', async () => {
+    const code = `console.log('hello') // [!code error]`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationErrorLevel({
+          classActiveCode: 'has-error-code',
+        }),
+      ],
+    })
+
+    expect(html).toContain('<code class="has-error-code">')
+  })
+
+  it('works together with classActivePre', async () => {
+    const code = `console.log('hello') // [!code ++]`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationDiff({
+          classActivePre: 'has-diff-pre',
+          classActiveCode: 'has-diff-code',
+        }),
+      ],
+    })
+
+    expect(html).toContain('class="shiki github-dark has-diff-pre"')
+    expect(html).toContain('<code class="has-diff-code">')
+  })
+
+  it('does not add class when no notation is present', async () => {
+    const code = `console.log('hello')`
+
+    const html = await codeToHtml(code, {
+      lang: 'js',
+      theme: 'github-dark',
+      transformers: [
+        transformerNotationDiff({
+          classActiveCode: 'has-diff-code',
+        }),
+      ],
+    })
+
+    expect(html).not.toContain('has-diff-code')
+  })
+})