feat(transformers): support zeroIndexed option to transformerMetaHighlight (#1149)

Author: manak-sharma20

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

@@ -3,17 +3,20 @@ import type { ShikiTransformer } from '@shikijs/types'
 export function parseMetaHighlightString(meta: string): number[] | null {
   if (!meta)
     return null
+
   const match = meta.match(/\{([\d,-]+)\}/)
   if (!match)
     return null
+
   const lines = match[1]
     .split(',')
     .flatMap((v) => {
-      const num = v.split('-').map(v => Number.parseInt(v, 10))
-      if (num.length === 1)
-        return [num[0]]
-      return Array.from({ length: num[1] - num[0] + 1 }, (_, i) => i + num[0])
+      const range = v.split('-').map(n => Number.parseInt(n, 10))
+      return range.length === 1
+        ? [range[0]]
+        : Array.from({ length: range[1] - range[0] + 1 }, (_, i) => range[0] + i)
     })
+
   return lines
 }
 
@@ -24,6 +27,12 @@ export interface TransformerMetaHighlightOptions {
    * @default 'highlighted'
    */
   className?: string
+  /**
+   * Interpret line numbers as 0-indexed
+   *
+   * @default false
+   */
+  zeroIndexed?: boolean
 }
 
 const symbol = Symbol('highlighted-lines')
@@ -34,25 +43,23 @@ const symbol = Symbol('highlighted-lines')
 export function transformerMetaHighlight(
   options: TransformerMetaHighlightOptions = {},
 ): ShikiTransformer {
-  const {
-    className = 'highlighted',
-  } = options
+  const { className = 'highlighted', zeroIndexed = false } = options
 
   return {
     name: '@shikijs/transformers:meta-highlight',
-    line(node, line) {
-      if (!this.options.meta?.__raw) {
+    line(node, lineNumber) {
+      if (!this.options.meta?.__raw)
         return
-      }
-      const meta = this.meta as {
-        [symbol]: number[] | null
-      }
 
+      const meta = this.meta as { [symbol]: number[] | null }
       meta[symbol] ??= parseMetaHighlightString(this.options.meta.__raw)
-      const lines: number[] = meta[symbol] ?? []
 
-      if (lines.includes(line))
+      const highlightedLines: number[] = meta[symbol] ?? []
+      const effectiveLine = zeroIndexed ? lineNumber - 1 : lineNumber
+
+      if (highlightedLines.includes(effectiveLine))
         this.addClassToHast(node, className)
+
       return node
     },
   }

packages/transformers/test/__snapshots__/transformer-meta-highlight-zeroIndexed.test.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformerMetaHighlight - zeroIndexed behavior > default mode should treat meta as 1-indexed 1`] = `
+"<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line highlighted"><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">line 0</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<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">line 1</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<span class="line highlighted"><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">line 2</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<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">line 3</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span></code></pre>"
+`;
+
+exports[`transformerMetaHighlight - zeroIndexed behavior > when zeroIndexed=true it should treat meta as 0-indexed 1`] = `
+"<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" 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">line 0</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<span class="line highlighted"><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">line 1</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<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">line 2</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span>
+<span class="line highlighted"><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">line 3</span><span style="color:#ECEFF4">"</span><span style="color:#D8DEE9FF">)</span></span></code></pre>"
+`;

packages/transformers/test/transformer-meta-highlight-zeroIndexed.test.ts

@@ -0,0 +1,32 @@
+import { codeToHtml } from 'shiki'
+import { describe, expect, it } from 'vitest'
+import { transformerMetaHighlight } from '../src'
+
+const input = `
+console.log("line 0")
+console.log("line 1")
+console.log("line 2")
+console.log("line 3")
+`.trim()
+
+describe('transformerMetaHighlight - zeroIndexed behavior', () => {
+  it('default mode should treat meta as 1-indexed', async () => {
+    const html = await codeToHtml(input, {
+      lang: 'js',
+      theme: 'nord',
+      meta: { __raw: '{1,3}' },
+      transformers: [transformerMetaHighlight()],
+    })
+    expect(html).toMatchSnapshot()
+  })
+
+  it('when zeroIndexed=true it should treat meta as 0-indexed', async () => {
+    const html = await codeToHtml(input, {
+      lang: 'js',
+      theme: 'nord',
+      meta: { __raw: '{1,3}' },
+      transformers: [transformerMetaHighlight({ zeroIndexed: true })],
+    })
+    expect(html).toMatchSnapshot()
+  })
+})