shikijs / shiki

A beautiful yet powerful syntax highlighter
http://shiki.style/
MIT License
10.3k stars 374 forks source link

feat(rehype): trim trailing new line passed in from rehype/remark #729

Closed Ovyerus closed 3 months ago

Ovyerus commented 3 months ago

Description

Trim the single trailing newline at the end of code that gets passed into Shiki from Rehype, which would result in dangling empty <span class="line"> elements at the end of every code block.

DOM screenshot, showing a completely empty `line` element after one expected line of code. Markdown source screenshot, showing only one line of text.

Usually, these extra elements aren't an issue—evident by the fact that this appears to mostly have flown under the radar since the Rehype plugin was introduced, the only instance I can find of someone noticing this is in a comment on an unrelated issue—however this issue emerges if you wish to display line numbers within a code block using a CSS counter, which my website does.

Website screenshot, showing an extra blank row after the code block text

Linked Issues

Additional context

This fix only trims the very last newline, as that's the problem one that is received by Shiki from Rehype. I'm assuming that any extra newlines within the code block are the user's own fault (intentional or not), so they probably shouldn't be messed with.

netlify[bot] commented 3 months ago

Deploy Preview for shiki-matsu ready!

Name Link
Latest commit b3218e97c968178b2fa5ed36747cc9c8f6ae2f64
Latest deploy log https://app.netlify.com/sites/shiki-matsu/deploys/66bce8a1c55c27000807e719
Deploy Preview https://deploy-preview-729--shiki-matsu.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for shiki-next ready!

Name Link
Latest commit b3218e97c968178b2fa5ed36747cc9c8f6ae2f64
Latest deploy log https://app.netlify.com/sites/shiki-next/deploys/66bce8a1ab370600072df241
Deploy Preview https://deploy-preview-729--shiki-next.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 94.42%. Comparing base (4a58472) to head (18a5049).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #729 +/- ## ======================================= Coverage 94.42% 94.42% ======================================= Files 63 63 Lines 3804 3804 Branches 839 839 ======================================= Hits 3592 3592 Misses 207 207 Partials 5 5 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.