PrismJS / PrismJS/prism

Prism + Line Numbers : Print version will lose line numbers when code listing need to be divided between two pages

Open
#3,981 1 comment 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: 1.30.0
  • (with Line Numbers)
  • Plugins: line-highlight+line-numbers+autolinker+custom-class+file-highlight+show-language+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard+download-button+diff-highlight+treeview
  • Environment: Google Chrome 137.0.7151.69 (64 bit), (vanilla) JavaScript, without server/backend or any framework

Description
When I will show version for print in my Browser and I provide enough text in page so my code listing will grow over the page to next one, then the 1st one page will lose line numbering and the second one has the correct line numbering. Standard rendered version is fully correct

Image

My broader scenario: I am using marked.js for printing markdown files to HTML output. Just after that I will process my code listing this way to activate line numbers:

  doc.querySelectorAll('pre code').forEach((block) => {
    block.classList.add('line-numbers');
    Prism.highlightElement(block);
  });

Example
HelpViewer

workaround
I have found there can be done workaround solution by insert page break just before start of code listing. Just when code listing starts on new page I see all lines are rendered correctly with numbering.

CSS class for div:
.page-break {
page-break-before: always;
break-before: page;
}

I haven't checked what happens if I provide a code listing on more than one page.

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

Reproduce the issue in Chrome print preview using Prism 1.30.0 with the Line Numbers plugin and a code listing that spans pages. Start with the line-numbers plugin and its print-related behavior; done means line numbers remain visible and correct on every printed page, including listings split across pages.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.