PrismJS / PrismJS/prism

Extra line highlight plus unwanted number with Python comments and data-line range

Open
#3,561 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Information

  • Language: Python
  • Plugins: Line Highlight, Line Numbers, Command Line, Normalize Whitespace

(https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+arduino+bash+c+csharp+cpp+git+json+lua+markdown+markup-templating+php+python+ruby+yaml&plugins=line-highlight+line-numbers+command-line+normalize-whitespace)

Tested in Prism 1.29.0

Description

When we add comments into Python code, and specify a range for line-highlighting, it causes the highlighting to add an extra line highlight which also shows a line-number even if we have chosen not to show line numbers. This doesn't happen if we use a comma separated list as a workaround, e.g. data-line="2,3,4,5"
The problem goes away if we remove the Python comments from the code.

Not possible to reproduce on the test page as this doesn't seem to allow us to control highlighting and numbers.

Code snippet
We are initialising Prism on the following markup:

<pre dir="ltr" data-start="1" data-line="2-5">
    <code class="language-python" dir="ltr">
      # Colour palette
      c = (0, 0, 0) # Black
      a = (255, 255, 255) # White
      v = (255, 0, 0) # Red
      m = (34, 139, 34) # ForestGreen
    </code>
  </pre>

Result on the page:

Screenshot 2022-09-21 at 12 49 48

The following is the code we use to initialise Prism on HTML injected into a React App - the code prevents calling Prism over and over under most conditions unless we need to force it for a section of page we are 'un-hiding':

const highlightedClass = 'syntax-highlighted'
const prismInit = () => {
window.Prism.hooks.add('after-highlight', (env) => {
  env.element.classList.add(highlightedClass)
})
}

const initPrismSyntaxHighlighting = (container = document, force = false) => {
const selector = [
  'pre code:not([class*="language-blocks"])',
  'code[class*="language-"]:not([class*="language-blocks"])',
].join(', ')
const elements = container.querySelectorAll(selector)

if (elements.length > 0) {
  for (const element of elements) {
    if(force || !element.classList.contains(highlightedClass)) {
      Prism.highlightElement(element)
    }
  }
}
}

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 Prism's Line Highlight and Line Numbers plugins and reproduce the supplied Python markup using data-start="1" and data-line="2-5". Compare the result with the comma-separated range workaround; done means Python comments no longer create an extra highlighted line or an unwanted line number when line numbers are disabled.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.