1529886 - Line numbers in the code block do not align with the code

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, enhancement)

Description

[Thammarith]

What did you do?

1. Visit a document page with a grey code block, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

What happened?

The code and their line numbers are not aligned.

What should have happened?

The line numbers should be in the same lines corresponding to the code.

Is there anything else we should know?

Affected browsers:

• Firefox Quantum @ 65.0.1 (64-bit)
• Firefox Developer Edition @ 66.0b9 (64-bit)

Comment 1

[Thammarith]

Attachment: Screenshot of the code block

Comment 2

[Thammarith]

Attachment: Screenshot with arrows pointing to the problem

Comment 3

[John Whitlock [:jwhitlock]]

This appears to be caused by the Prism update in bug 1520004.

Here's the section:

<pre class="brush: css no-line-numbers">
/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}</pre>

The no-line-numbers class is meant to suppress line numbers, as seen in static/js/syntax-prism.js:

if (!$pre.hasClass('no-line-numbers')) {
  // Prism upgrade requires adding a class to use line numbering
  $pre.addClass('line-numbers');
}

However, Prism 1.15's behaviour seems to have changed, and the line numbers are now added but not hidden, and not positioned in the proper place.

It's not clear to me what code change is needed. Updating the content is not practical. We may revert Prism 1.15.

Comment 4

[ExE Boss]

The solution would be to use CSS to hide the line numbers when the no‑line‑numbers class is applied.

Also, this only affects <pre> blocks with no‑line‑numbers.

Comment 5

[ExE Boss]

Attachment: Kuma: Make `no‑line‑numbers` always hide the line numbers

Comment 7

[Thammarith]

This seems to be solved by ExE Boss and live on the web. Should I close it?

Comment 8

[John Whitlock [:jwhitlock]]

Thanks for confirming Thammarith, and thanks for the quick fix ExE Boss.