Line highlight + line numbers uses different data attributes than line numbers alone

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

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
frontend

Research direction

Start by comparing the Line Highlight and Line Numbers plugin entry points and their documented HTML attributes, using the linked Line Highlight example as the reference. Decide whether Line Numbers should consume data-line-offset and how data-start or data-offset should be handled, then verify that the two plugins produce consistent line numbering and highlighting.

Written by the indexing model from the issue text.

Description

enhancement plugins

Information:

  • Prism version: Current
  • Plugins: Line Highlight + Line Numbers
  • Environment: Browser

Description
The Line Highlight plugin provides a data-line-offset attribute to start the count for line highlighting. However, if you're using it with the Line Numbers plugin, you have to provide a different attribute, data-start, and it's not the same value (you have to add 1 to it to get the same behavior as data-line-offset). Fortunately, it's not a huge deal to just include both on the HTML such that it's consistent regardless of the usage of Line Numbers, but it's a bit of a nuisance.

I'm inclined to think Line Numbers should also pick up data-line-offset, and maybe deprecate data-offset and remove that in v2.0. Alternatively, do nothing until v2.0 (I've got it working so I don't really need an upstream fix right now). But this felt like a minor inconsistency we should maybe address.

Example
This is visible if you look in the HTML for Line Highlight: https://prismjs.com/plugins/line-highlight/ The data attributes used are different.

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

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.

More from PrismJS/prism

All issues in PrismJS/prism

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.