Skip to content

Styling padding Issue #54

New issue
New issue
Closed
Closed
Styling padding Issue#54
Assignees
wcoder
@rmawatson

Description

@rmawatson
rmawatson
opened on Dec 9, 2018 · edited by wcoder

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.

Activity

wcoder

wcoder commented on Dec 12, 2018

@wcoder
wcoder
on Dec 12, 2018
Owner

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

wcoder
self-assigned this
on Dec 12, 2018
wcoder
added
need more info
and removed
need more info
on Dec 12, 2018
rmawatson

rmawatson commented on Dec 12, 2018

@rmawatson
rmawatson
on Dec 12, 2018 · edited by wcoder
Author

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;

littlefinger42

littlefinger42 commented on Dec 18, 2018

@littlefinger42
littlefinger42
on Dec 18, 2018

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

rmawatson

rmawatson commented on Dec 18, 2018

@rmawatson
rmawatson
on Dec 18, 2018
Author

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

wcoder
closed this as completedin f691a30on Dec 18, 2018
wcoder

wcoder commented on Dec 18, 2018

@wcoder
wcoder
on Dec 18, 2018
Owner

Hi there, thanks for contributing!

wcoder
mentioned this on Dec 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @wcoder@rmawatson@littlefinger42

      Issue actions
        Styling padding Issue · Issue #54 · wcoder/highlightjs-line-numbers.js