Extra Line Rendered with Line-Based Magic Comments in Code Highlighting

[tszhong0411]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

When using magic comments for code highlighting, I noticed an extra line rendered when the comment is on its line, compared to when it is inline. This only happens on the first line.

Example 1: Inline Comment (No Extra Line)

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

This renders correctly without any extra lines.

Example 2: Line-Based Comment (Extra Line Rendered)

// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

In this case, an extra line is rendered above the highlighted block.

Screenshot

transformerNotationHighlight

transformerNotationWordHighlight

transformerNotationFocus

Expected Behavior

Both inline and line-based magic comments should render the code block without introducing extra lines.

Actual Behavior

Line-based magic comments introduce an extra line above the highlighted block.

Additional Notes

I am unsure if this is expected behavior or a bug and if there is an existing issue that points to this behavior.

Reproduction

https://shiki.style/packages/transformers#transformernotationhighlight

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[ole]

I agree. I find it distracting that a transformer-highlight comment (when placed on its own line) leaves a blank line in the output.

[ole]

@antfu Thanks a lot for the fix, much appreciated!

[sheremet-va]

Doesn't seem like this issue is fixed (at least, not for !code word):

• docs: update shiki transformers and clarify root project vitest-dev/vitest#7518
• https://deploy-preview-7518--vitest-dev.netlify.app/advanced/api/test-case.html#name

[antfu]

@sheremet-va You might want to upgrade vitepress to v2.0.0-alpha.x and add versions resolutions

[sheremet-va]

You might want to upgrade vitepress to v2.0.0-alpha.x and add versions resolutions

Does it mean this fix doesn't work in vitespress@stable?