feat(transformers): add transformerRenderLineNumber#1202
feat(transformers): add transformerRenderLineNumber#1202dahiya001rohit wants to merge 2 commits intoshikijs:mainfrom
Conversation
✅ Deploy Preview for shiki-matsu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for shiki-next ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds a new transformer transformerRenderLineNumber that injects line numbers as HTML elements into syntax-highlighted code blocks. The transformer allows developers to visually display line numbers alongside their code, with customization options for the CSS class name and starting line number.
- Implements
transformerRenderLineNumberwith configurableclassLineNumberandstartNumberoptions - Adds comprehensive unit tests covering basic functionality, custom classes, and custom start numbers
- Exports the new transformer in the package index
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/transformers/src/transformers/render-line-number.ts | New transformer implementation that prepends line number spans to each code line |
| packages/transformers/src/index.ts | Exports the new transformer in alphabetical order with other transformers |
| packages/transformers/test/render-line-number.test.ts | Unit tests covering basic usage, custom class names, and custom start numbers |
| packages/transformers/test/snapshots/render-line-number.test.ts.snap | Snapshot tests validating the HTML output for all test cases |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| type: 'element', | ||
| tagName: 'span', | ||
| properties: { | ||
| className: [classLineNumber], |
There was a problem hiding this comment.
For consistency with other transformers in this codebase (e.g., render-indent-guides.ts, meta-highlight-word.ts), use class instead of className in HAST element properties. Both work, but class is the convention used throughout this codebase.
class: classLineNumber,| className: [classLineNumber], | |
| class: [classLineNumber], |
| { | ||
| type: 'text', | ||
| value: `${number}`, | ||
| } as Text, |
There was a problem hiding this comment.
The as Text type assertion is unnecessary. The object literal already matches the Text type. Consider removing it for cleaner code:
children: [
{
type: 'text',
value: `${number}`,
},
],| } as Text, | |
| }, |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1202 +/- ##
==========================================
+ Coverage 95.20% 95.22% +0.01%
==========================================
Files 92 93 +1
Lines 7922 7954 +32
Branches 1689 1694 +5
==========================================
+ Hits 7542 7574 +32
Misses 374 374
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
classLineNumberandstartNumber.#1201