highlightjs-line-numbers.js icon indicating copy to clipboard operation
highlightjs-line-numbers.js copied to clipboard

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

Open RocketMan opened this issue 4 years ago • 3 comments

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.

RocketMan avatar May 22 '20 12:05 RocketMan

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;
}

guillaume-dorczynski avatar May 30 '20 20:05 guillaume-dorczynski

Same here... Any updates on this?

olovskos avatar Dec 02 '20 20:12 olovskos