PrismJS / PrismJS/prism

Alignment bug with line numbers

Open
#1,132 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug plugins
Dominant language
JavaScript
Stars
13k
Forks
1.4k
Avg merge
15h 36m
Merged PRs (30d)
3

Description

Just wanted to leave a short note, that the current release version including the line numbers plugin has a small alignment bug. I've tested it in Chrome 58, FF Nightly and IE Edge, each of them displays the line numbers 2 Pixels below the base line. With some doctypes + IE the alignment gets even worse and is a whole line height off.

The solution for my project is actually pretty straight forward: Add "display: inline-block" to the code tag.

The bug and the solution can be reproduced with the plugin example as well: http://prismjs.com/plugins/line-numbers/

Again, this was only tested in the browsers mentioned above.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the line-numbers plugin example at http://prismjs.com/plugins/line-numbers/ and inspect how the code tag is styled. Done means the line numbers align with the code baseline in Chrome, Firefox, and Edge, including the reported doctype case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.