extra spacing added between lines and highlight style other than background color

[ffd8]

Many thanks for this amazing add-on to highlight.js – provided exactly what I needed to highlight a few lines throughout display of code. I ran into a small issue and have a small feature request to consider:

When using the library, it added an extra line between every line of code, which then took up way too much space. Turns out it was because the divs that are wrapping all code are set to display:block; rather than inline, this solved it:

.highlight-line{
    display:inline;
}

I also ran into a strange issue while trying to combine with the highlightjs-line-numbers.js, in that it would take x seconds to trigger the highlight, even if I wasn't activating the line-numbers but had imported the script.. I'm guessing it's a manual setTimeout or setInterval that caused the delay (~5-10sec??), which made me think my own dynamic placement of code was causing the issue.. made a setTimeout.. still was an issue. Once I removed the line-numbers library, it worked instantly as planned. Maybe it's described somewhere – but was really confusing.

As for a feature, I personally didn't plan to change the background of a highlighted code, but rather add a css class with a pulsing animation – so those lines of code would fade in/out a bit, bringing subtle notice to them. Thankfully it was an easy change to make within the lib, swapping what normally occurs with this:

// lines[j].style.backgroundColor = option.color;
lines[j].classList.add('pulse')

Which made me wonder if it could/should be more custom as an option, what gets added to a given line of code. It could be ready for either CSS changes or adding a CSS class Something like:

codeHighlights.push({start:h, end:h, class:'pulse red'}) // can pass multiple classes
codeHighlights.push({start:h, end:h, style:'animation: pulse50 1.0s linear infinite;color:red;'}) // can pass multiple styles

That way when it's processed, it could activate the change as such:

for(var option of options) {
    for(var j = option.start; j <= option.end; ++j) {
        if(option.hasOwnProperty('style')){
            lines[j].style.cssText += option.style;                     
        }
        if(option.hasOwnProperty('class')){
            lines[j].classList.add(...option.class.split(' '));
        }
        lines[j].style.minWidth = scroll_width - paddingLeft - paddingRight + 'px';
    }
}

[TRSasasusu]

Thank you @ffd8

When using the library, it added an extra line between every line of code, which then took up way too much space.

hmmm... I cannot reproduce it. (I test it in Firefox and Safari on my Mac) Can you make some screenshots?

I also ran into a strange issue while trying to combine with the highlightjs-line-numbers.js, in that it would take x seconds to trigger the highlight, even if I wasn't activating the line-numbers but had imported the script..

Yes, it would be caused by 100 msec setInterval. (highlightjs-highlight-lines.js#L121) It could be shorter time, but it is not critical issue, I think.

As for a feature, I personally didn't plan to change the background of a highlighted code, but rather add a css class with a pulsing animation – so those lines of code would fade in/out a bit, bringing subtle notice to them.

Thank you for proposing enhancement. It would be addressed in #4.