wcoder/highlightjs-line-numbers.js

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

klische opened this issue · 3 comments

klische commented

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.
screen shot 2018-06-03 at 9 39 52 pm
screen shot 2018-06-03 at 9 40 25 pm

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 commented

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 commented

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 commented

Yes, you are right.

I already created the issue #39 about this.

  • 👍1