PrismJS / PrismJS/prism

Line highlight plugin highlights the line on last rendered code block only on a page with multiple code blocks.

Open
#3,762 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Information:

  • Prism version: PrismJS 1.29.0
  • Plugins: line-highlight and line-numbers
  • Environment: Browser

Description
I'm using the latest JavaScript and CSS for Prism I got off the website after selecting the theme I wanted (prism-tomorrow) and selected all the languages I wanted to include with prism. I've encountered some problems along the way specifically with the line-highlight plugin and I don't think it's the error with how I'm implementing it. (It's a custom error page where it shows portions of my code for debug).

On one page I have multiple code blocks that gets the same configuration for their highlighting but for some reason only the last code block gets any of it's line highlighted.

Why don't the other code blocks get their lines highlighted?

Example
All the other code blocks (that are not last) don't get any love from the line-highlighting plug-in
No lines highlighted in any other code block

The last code block is the only block that gets highlighted
The last code block

This is the code that generates the code block that does the highlighting

protected function getCodeSnippet($file, $line, $linesBefore = 10, $linesAfter = 10)
{
    $code = '<pre data-line="' . $line . '" class="line-numbers brad-3" data-start="' . ($line - $linesBefore) . '"><code class="language-php">';
    if (is_readable($file)) {
        $lines = file($file);
        $startLine = max(1, $line - $linesBefore);
        $endLine = min(count($lines), $line + $linesAfter);

        for ($i = $startLine; $i <= $endLine; $i++) {
            $code .= htmlspecialchars($lines[$i - 1]);
        }
    }
    $code .= '</code></pre>';

    return $code;
}

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 Prism 1.29.0 line-highlight and line-numbers plugins and reproduce the behavior in a browser using multiple generated pre/code blocks. Compare the markup produced by getCodeSnippet, especially data-line and data-start, and verify whether every block is highlighted rather than only the last one.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.