Line numbering about rainbow HOT 9 CLOSED

Hey, thanks for the ticket. I agree this would be a nice feature, but I'm not sure if it will be easy to implement without using an <li> for each line. I can experiment

from rainbow.

I just switched from using http://alexgorbatchev.com/SyntaxHighlighter/ to using Rainbow. The main reason for the switch is because Rainbow is so lightweight, adding line count and other stuff will just make it heavier and slower in my Opinion

from rainbow.

A lightweight idea to integrate line-numbers would be to just create an (equally formatted) pre/code section that floats left to the code. The only downside of this is that it doesn't allow for adding anchors …

But I guess the same could be done with a left-floating list too.

from rainbow.

The only downside to line numbering in code formatters is that (mostly) copy-pasting the code means you're also copy pasting the line-numbers. I just wrote some 40 lines of code that looks at the code.rainbow styling and adds a background-image (coded from canvas) to the surrounding pre-tag (adding bgimg to code tag doesn't really work). I did have to hack a bit since rainbow has no callbacks for when a code tag has been formatted. This only works properly for white-space:nowrap; of course.
If you're interested I could fork this and create a branch (as soon as I figure out how to since I'm a github noob).

from rainbow.

Got a working example up here: http://www.sjeiti.com/?page_id=1001&n
Also forked and managed to commit it here: https://github.com/Sjeiti/rainbow

from rainbow.

Wow this is a neat solution! I'll look more closely at the code a little later. Is it possible that this can be done without editing rainbow.js at all? Could it be a standalone js file that you include on your page after rainbow?

There is a callback for when a code block has been highlighted. I'm not sure it is what you are looking for but you can try:

Rainbow.onHighlight(function(block, language) {
    // do whatever
});

from rainbow.

Oh ok... I think I can manage with that callback, provided -block- is the code-element. I'll see if I can fix something tonight, otherwise tomorrow.

Btw... what do you think is the best solution for choosing between line-numbering and/or actual lines. Right now they both default to true meaning a double background is added: one for the numbers and one for the lines.
I could either split the code into two files, or expect <code class="numbers lines"> ... or just always add both numbers and lines. I'm leaning towards the latter.

I'm also thinking this should be able to work with the existing themes but that would mean some more debugging (since line-height:normal; breaks stuff. I've only tested this on Chrome and Safari with absolute pixel values.
But then I'd have to add the padding required for the numbers through javascript (I wonder if there's a good way to find the width of a monospaced character).

The color of the numbers is the pre color, the color for the lines is the pre borderColor (couldn't come up with anything better)

from rainbow.

Ok.... it's pretty much working now, also for existing themes.
I have yet to test other browsers though.

from rainbow.

Closing this out

from rainbow.