Giters

wcoder / highlightjs-line-numbers.js

Line numbering plugin for Highlight.js

Home Page:https://wcoder.github.io/highlightjs-line-numbers.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Styling padding Issue

rmawatson opened this issue · comments

commented

Describe the bug
The script appears to set padding:0 in a <style> tag, meaning I can't override this is the css (as in example in the readme)

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

To Reproduce

Expected behavior
able to style the padding.

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

Desktop (please complete the following information):

  • Chrome
  • Latest

Smartphone (please complete the following information):

  • Device:Desktop Windows 10 PC

Additional context
Add any other context about the problem here.

commented

Hi @rmawatson thank you for feedback!

Currently, this plugin injects default styles in the <head> of the page after init.

workaround

You can override default styles if put it after plugin <script> declaration.

See an example: https://jsbin.com/wupayip/edit?html,output

commented

right, yes, but your example with padding-right in the readme is wrong. Due to your padding in the style tag above you cannot set padding-right here. Try in your example code, you will see it makes no difference

/* for block of numbers */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px; <--- From the README

    /* your custom style here */
}

It does however work if you change this to,

padding-right: 5px !important;

commented

This is due to CSS specificity. Learn more about CSS specificity on MDN here.

If you attach your padding-right: 5px; to a more specific selector than it is set in the base HLJS styling, it will be applied. A more specific selector could be:

.hljs-ln td.hljs-ln-numbers { padding-right: 5px; }

commented

I know whats it due too... I am pointing out that the example in the readme with this project is wrong.

commented

Hi there, thanks for contributing!