padding style in .hljs-ln-numbers and .hljs-ln-code not working

[RocketMan]

In Usage, the examples give padding-right and padding-left in classes .hljs-ln-numbers and .hljs-ln-coding, respectively.

These styles appear to be ignored, because of explicit padding:0 in the DOM:

<style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style>

The above is added by this code:

https://github.com/wcoder/highlightjs-line-numbers.js/blob/98ca4f2093b1bae16ff5176e0115c8e8ca1e68a3/src/highlightjs-line-numbers.js#L136

One can force the padding to work in .hljs-ln-numbers and .hljs-ln-coding by appending !important to the padding style, but that seems somewhat hackish.

Expected: Padding specification in the user-supplied .hljs-ln-* classes should be accepted.

[guillaume-dorczynski]

Hello, thanks for the nice plugin, I have the same issue

Here is a workaround:

.hljs-ln-line {
  padding-left: 5px;
}

.hljs-ln-numbers {
  text-align: right;
  border-right: 1px solid #CCC; 
}

.hljs-ln-line.hljs-ln-n {
  padding-right: 5px;
}

But what I expected to use is:

.hljs-ln-line {
  padding-left: 5px;
}

.hljs-ln-numbers {
  text-align: right;
  border-right: 1px solid #CCC; 
  padding-right: 5px;
}

[olovskos]

Same here... Any updates on this?

[saahiyo]

Still not solved?