Using line numbering changes coloring of certain JSON elements to black color

[klische]

Describe the bug Using the latest version of highlight.js (9.12) and the line numbers library (2.3), certain elements in JSON (curly braces, colons, commas, and brackets) are now in black color. Not using the line numbering library does not produce this effect. It also changes the font size, but that's not too much of a concern for me.

To Reproduce Steps to reproduce the behavior:

1. Clone the repo here: https://github.com/klische/HighlightJSLineNumbers/tree/master
2. Open the index.html and observe that those elements listed above are in black color

Expected behavior

1. Clone the repo here: https://github.com/klische/HighlightJSLineNumbers/tree/master
2. Open the index_no_line_number.html and observe that those elements listed above are in the correct color

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 10.13.4 (17E202)
• Browser: Safari Version 11.1 (13605.1.33.1.4) and Chrome Version 67.0.3396.62 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: iPhone X, iPad Pro 12.9"
• OS: iOS 11.3
• Browser: WKWebView
• Version: iOS 11.3

[wcoder]

Hi @klische thank you for the feedback!

Interesting issue, I will think about the better solution.

Workaround

I propose to set color for .hljs-ln, because default styles of table override style-properties of .hljs)

.hljs-ln {
    color: #f8f8f2;
}

[klische]

That works! Unfortunately, the spacing is ignored :( I just noticed that. It shifts everything to the left.

EDIT: Please see the screenshot: It ignores the spacing in the code segment.

[wcoder]

Yes, you are right.

I already created the issue #39 about this.