Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line highlight: Fixed top offset in combination with Line numbers #2237

Merged

Conversation

@RunDevelopment
Copy link
Member

@RunDevelopment RunDevelopment commented Feb 29, 2020

This adds support for extra elements above the <code> element in combination with Line highlight and Line numbers.

image


However, there is one problem I wasn't able to fix: The slight error of the alignment of the line highlight. The cause for the issue is that the <code> element isn't perfectly aligned with the <pre> element (or any elements before it) which means that the line numbers are a few pixels too off. See #1132.
Because the line highlight is aligned by measuring the line numbers, it's off as well.
You can see this issue everywhere on the Line numbers page.

image

There is actually another fix for #1132 apart from the one proposed by the reporter of the issue: Set display: block for the <code> element.
This is compatible with Coy but not with Funky. I also tried a few different things but none of them worked.

If possible, I'd like to include the fix of the alignment here as well (because it's very visible after this update) but I have no idea how to fix this.

@RunDevelopment
Copy link
Member Author

@RunDevelopment RunDevelopment commented Feb 29, 2020

@siavashs I'm sorry but I can't figure out how to fix the alignment issue, so this pull request might take a while.

siavashs added a commit to siavashs/Prism that referenced this issue May 31, 2020
Temporary fix for line highlight plugin offset until it's fixed by upstream.
Fixes #27
Upstream PR PrismJS/prism#2237
siavashs added a commit to siavashs/Prism that referenced this issue May 31, 2020
Temporary fix for line highlight plugin offset until it's fixed by upstream.
Fixes #27
Upstream PR PrismJS/prism#2237
Copy link
Member

@mAAdhaTTah mAAdhaTTah left a comment

This is basically gtg w/ a style nit + a refresh.

@github-actions
Copy link

@github-actions github-actions bot commented Dec 23, 2020

JS File Size Changes (gzipped)

A total of 1 files have changed, with a combined diff of +80 B (+5.7%).

file master pull size diff % diff
plugins/line-highlight/prism-line-highlight.min.js 1.4 KB 1.48 KB +80 B +5.7%

Generated by 🚫 dangerJS against f381d40

@RunDevelopment RunDevelopment merged commit b40f8f4 into PrismJS:master Dec 23, 2020
8 checks passed
@RunDevelopment RunDevelopment deleted the line-highlight-top-offset-fix branch Dec 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants