Re: Change default style sheet: add line numbers

After learning a lot about style sheets from reading this thread, and by combining various ideas throughout the thread, and quite a bit of cut-and-try, I finally have some CSS-only settings that work for me^*, so here's what I have:

In Display Settings / Code Listing Settings I have two bits:

Code Prefix: I've set it to "<font color="red"><i></i></font>"

On-Site CSS Markup: I've added:

pre.code tt.codetext
{ counter-reset: codeLines; }

pre.code i::before
{ counter-increment: codeLines;
  content: counter(codeLines,decimal-leading-zero) ": ";
}
[download]

I'm pretty happy with the result, as I can still have my line numbers and no longer have the line numbers come through on cut-and-paste.

I originally had (cadged from Anonymous Monk in this post) div.codeblock in the counter reset list, but that had the unfortunate effect of making small codeblocks (ones without the download link) all have the same line number). (While I learned more about CSS, I didn't learn enough about know/explain why.)

Anyway, if people could try it on other browsers & such, I'd appreciate it. (I'll give MacOsX / safari & chrome a try when I get back to $work on Monday).

*: I'm using Microsoft Windows 8.1 and FireFox 35.0.1 as I'm testing today.

Update: By the way, I've tried to fix the line-wrap by replacing the content like so:

span.line-break { content: '' }
[download]

but it doesn't hide the line wrap marker. Considering that I'd often hand-edit to remove a few line numbers (when I only wanted a section of the OP), it's no big deal. If it becomes bothersome, I can always turn off line wrapping.

...roboticus

When your only tool is a hammer, all problems look like your thumb.

Comment on Re: Change default style sheet: add line numbers Select or Download Code

Replies are listed 'Best First'.
Re^2: Change default style sheet: add line numbers by jdporter (Paladin) on Apr 04, 2015 at 16:21 UTC
Brilliant! I can't thank you enough for this. It makes me think we could probably ditch that line-numbering "feature" entirely. I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.	[reply]
Re^2: Change default style sheet: add line numbers by LanX (Saint) on Apr 04, 2015 at 16:59 UTC
For me all lines are numbered with `01:` `Netscape Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:37.0) Gecko/20100101 Firefox/ +37.0` [download] Since I couldn't guaranty that other settings aren't interfering (there are plenty after 7 years) I tried an alternative account and now it worked for me in FF. Though testing on Safari/Android ~~didn't show any numbers, but red source code...~~ š Consequence, CSS tricks are fragile and can easily interfere with other settings. More elementary approaches like demonstrated in Metacpan or perlcommunity.de OTOH are well tested already. Cheers Rolf _{(addicted to the Perl Programming Language and ☆☆☆☆ :) Je suis Charlie!} š) UPDATE: I was able to fix this, but line-breaks are still lost after copying!	[reply] [d/l] [select]
Re^3: Change default style sheet: add line numbers by Anonymous Monk on Apr 05, 2015 at 02:07 UTC
More elementary approaches like demonstrated in Metacpan or perlcommunity.de OTOH are well tested already. Well the perlcommunity.de solution isn't bulletproof, it won't work well with wrapping or font customizations, the line numbers will get out of sync with the code the metacpan solution is javascript	[reply]
Re^4: Change default style sheet: add line numbers by LanX (Saint) on Apr 05, 2015 at 03:20 UTC
Customizations are always problematic. The numbers must have the same fonts and line-height like the code. Wrapping just means skipping to number a line. Though I prefer the scrolling frame solution there. Cheers Rolf _{(addicted to the Perl Programming Language and ☆☆☆☆ :) Je suis Charlie!}	[reply]
Re^2: Change default style sheet: add line numbers ( user-select: none; ) by Anonymous Monk on Apr 05, 2015 at 09:18 UTC
I originally had (cadged from Anonymous Monk in this post) div.codeblock in the counter reset list, but that had the unfortunate effect of making small codeblocks (ones without the download link) all have the same line number). (While I learned more about CSS, I didn't learn enough about know/explain why.) Thats odd, the one liners are class inlinecode not codetext , but this should work as well and not need font tags `pre.code div.codeblock tt.codetext { counter-reset: codeLineCounter; } pre.code div.codeblock tt.codetext i::before { counter-increment: codeLineCounter; content: counter(codeLineCounter,decimal-leading-zero) ": "; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; float: left; width: 3em; text-align: right; color: purple; }` [download] And I think that `user-select: none;` stuff might work with the regular "code prefix" line numbers feature I can always turn off line wrapping. Why don't you turn on soft-hyphen line wrapping? I think that `select: none;` might help with the soft-hyphen not being copy/pasted	[reply] [d/l] [select]
Re^3: Change default style sheet: add line numbers ( user-select: none; ) by Anonymous Monk on Apr 05, 2015 at 09:22 UTC
so `.unselectable, .line-breaker { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }` [download]	[reply] [d/l]