Question

I’m working on adding line number support to Rainbow, a syntax highlighter, but I can’t figure out how to make the line numbers uncopyable.

Disabling selection via user-select: none; makes an element unhighlightable, but you can still copy its text by highlighting around it and then copying, which ends up copying the line numbers along with code.

Here is a working example of the problem: http://jsfiddle.net/CjJLv/8/

Any help would be appreciated. Thanks!

Answer 1

Okay, the easiest way in compliant browsers, and, sadly, not reliable cross-browser, is to use generated content (I’ve removed the various parts where index was being added to textual content in the plug-in, and used the following (at the end of the CSS) to implement un-copyable text:

table.rainbow {
    counter-reset: line;
}

table.rainbow tbody tr td:first-child {
    counter-increment: line;
}

table.rainbow tr td:first-child::before {
    content: counter(line);
}

JS Fiddle demo.

This does, though, have some rather large flaws (the cross-browser unfriendly approach being the biggest), so I’ll try for something better…