Wonky css when combined with Bootstrap

[SumNeuron]

Just tried to use this with Bootstrap and what was nicely highlighted code with hightlightjs became a weirdly spaced mess.

Please check css to make compatible with Bootstrap v4

[wcoder]

Hi @SumNeuron thank you for feedback!

I tried to use default version of plugin and bootstrap, works fine.

Note: This plugin styles full customizable, and you can change each property.

Could you please provide me with an example of messed view?

[xiaozi0lei]

@wcoder I think @SumNeuron means
The line number style is not same as your website style.
There are "|" between line number and code, and padding is 5px and 10px between line number and code.

Due to the following code, there are no "|" and no padding in our style.

function addStyles () {
        var css = d.createElement('style');
        css.type = 'text/css';
        css.innerHTML = format(
            '.{0}{border-collapse:collapse}\
            .{0} td{padding:0}\
            .{1}:before{content:attr({2})}',
        [
            TABLE_NAME,
            NUMBER_LINE_NAME,
            DATA_ATTR_NAME
        ]);
        d.getElementsByTagName('head')[0].appendChild(css);
    }

@SumNeuron We should add extra css style after the hljs.initLineNumbersOnLoad(); code like below.

td.hljs-ln-numbers {
                text-align: center;
                color: #ccc;
                border-right: 1px solid #999;
                vertical-align: top;
                padding-right: 5px;

                 -webkit-touch-callout: none;
                 -webkit-user-select: none;
                 -khtml-user-select: none;
                 -moz-user-select: none;
                 -ms-user-select: none;
                user-select: none;
            }
            td.hljs-ln-code {
                padding-left: 10px;
            }

            code {
                white-space: pre-wrap;
                overflow: auto;
            }

Then you will get this picture.

[wcoder]

@xiaozi0lei thank you for the detailed answer!

I will close this issue, if anyone has the same problem, please write here.