feat(transformers): add transformerRenderLineNumber

docs/packages/transformers.md

@@ -404,6 +404,37 @@ pre.shiki .indent::before {
 
 ---
 
+### `transformerRenderLineNumber`
+
+Render line numbers as individual spans, with class `line-number`.
+
+```ts
+import { transformerRenderLineNumber } from '@shikijs/transformers'
+
+const html = await codeToHtml(code, {
+  transformers: [
+    transformerRenderLineNumber(),
+  ],
+})
+```
+
+Options:
+
+- `start`: Start number. Default `1`.
+- `classLineNumber`: Class for line number. Default `'line-number'`.
+
+With some additional CSS rules, you can make it look like this:
+
+```css
+pre.shiki .line-number {
+  user-select: none;
+  opacity: 0.5;
+  margin-right: 1em;
+}
+```
+
+---
+
 ### `transformerMetaHighlight`
 
 Highlight lines based on the [meta string](/guide/transformers#meta) provided on the code snippet.

packages/transformers/src/index.ts

@@ -13,5 +13,6 @@ export * from './transformers/remove-comments'
 export * from './transformers/remove-line-breaks'
 export * from './transformers/remove-notation-escape'
 export * from './transformers/render-indent-guides'
+export * from './transformers/render-line-number'
 export * from './transformers/render-whitespace'
 export * from './transformers/style-to-class'

packages/transformers/src/transformers/render-line-number.ts

@@ -0,0 +1,45 @@
+import type { ShikiTransformer } from '@shikijs/types'
+
+export interface TransformerRenderLineNumberOptions {
+  /**
+   * Class for line number
+   * @default 'line-number'
+   */
+  classLineNumber?: string
+  /**
+   * Start number
+   * @default 1
+   */
+  start?: number
+}
+
+/**
+ * Render line number as separate tokens.
+ *
+ * @param options
+ */
+export function transformerRenderLineNumber(
+  options: TransformerRenderLineNumberOptions = {},
+): ShikiTransformer {
+  const {
+    classLineNumber = 'line-number',
+    start = 1,
+  } = options
+
+  return {
+    name: '@shikijs/transformers:render-line-number',
+    line(node, line) {
+      if (node.tagName === 'span') {
+        const num = start + line - 1
+        node.children.unshift({
+          type: 'element',
+          tagName: 'span',
+          properties: {
+            class: classLineNumber,
+          },
+          children: [{ type: 'text', value: String(num) }],
+        })
+      }
+    },
+  }
+}

packages/transformers/test/fixtures.test.ts

@@ -13,6 +13,7 @@ import {
   transformerRemoveComments,
   transformerRemoveLineBreak,
   transformerRemoveNotationEscape,
+  transformerRenderLineNumber,
   transformerRenderWhitespace,
 } from '../src'
 
@@ -193,6 +194,22 @@ suite(
   '.leading',
 )
 
+suite(
+  'line-number',
+  import.meta.glob('./fixtures/line-number/*.*', { query: '?raw', import: 'default', eager: true }),
+  [
+    transformerRenderLineNumber(),
+  ],
+  code => `${code}
+<style>
+.line-number {
+  user-select: none;
+  opacity: 0.5;
+  margin-right: 1em;
+}
+</style>`,
+)
+
 suite(
   'all',
   import.meta.glob('./fixtures/all/*.*', { query: '?raw', import: 'default', eager: true }),

test/exports/@shikijs/transformers.yaml

@@ -16,5 +16,6 @@
   transformerRemoveLineBreak: function
   transformerRemoveNotationEscape: function
   transformerRenderIndentGuides: function
+  transformerRenderLineNumber: function
   transformerRenderWhitespace: function
   transformerStyleToClass: function