Re^5: Change default style sheet: add line numbers (counter-increment: codeLineCounter;)

Well, I really thought CSS so I went looking and found it http://dev.w3.org/csswg/css-lists-3/#counters-without-boxes

So with current perlmonks feature of a "code prefix" using <i></i> you get this chunk of html/css :)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<style type="text/css">

pre.code div.codeblock tt.codetext
{ counter-reset: codeLineCounter; }
pre.code i::before
{ counter-increment: codeLineCounter;
  content: counter(codeLineCounter,decimal-leading-zero) ": "; }
    
</style>
    </head>
<body>
<pre class="code"><div class='codeblock'><tt class='codetext'><i></i>#
+!/usr/bin/perl --
<i></i>use strict;
<i></i>use warnings;
<i></i>print "Hello <span class="line-breaker">
<font color="red">+</font></span> world!\n";
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>1;
</tt></div></pre>
[download]

Comment on Re^5: Change default style sheet: add line numbers (counter-increment: codeLineCounter;) Select or Download Code

Replies are listed 'Best First'.
Re^6: Change default style sheet: add line numbers (ol li) by Anonymous Monk on Apr 01, 2015 at 20:09 UTC
FWIW, the same or better results could be accomplished with `<li>` "code prefix" but ATM `<ol> </ol>` tags are missing , which would have to be added by pmdev or via javascript ... but if you go way of javascript might as well go for full radicality of PerlMonks meets Twitter Bootstrap	[reply] [d/l] [select]
Re^7: Change default style sheet: add line numbers (ol li) by ww (Archbishop) on Apr 02, 2015 at 11:21 UTC
The ordered_list tags are missing? Let's see: `<ol><li> item one</li> <li> item two</li> </ol>` [download] renders... item one item two Really! Spirit of the Monastery	[reply] [d/l] [select]
Re^8: Change default style sheet: add line numbers (ol li) by Anonymous Monk on Apr 02, 2015 at 19:29 UTC
The ordered_list tags are missing? Let's see: What are you talking about ww? If you use "code prefix" feature to add `<li>` its not going to add `<ol> </ol>` tags ... unless there is some other user setting	[reply] [d/l] [select]
Re^9: Change default style sheet: add line numbers (ol li) by ww (Archbishop) on Apr 02, 2015 at 20:03 UTC
Re^10: Change default style sheet: add line numbers (ol li) by LanX (Saint) on Apr 02, 2015 at 20:19 UTC
Re^10: Change default style sheet: add line numbers (ol li) by Anonymous Monk on Apr 02, 2015 at 20:27 UTC
Re^6: Change default style sheet: add line numbers (counter-increment: codeLineCounter;) by LanX (Saint) on Apr 02, 2015 at 10:13 UTC
That's indeed a good idea, but some browsers lose line breaks when copying. Cheers Rolf _{(addicted to the Perl Programming Language and ☆☆☆☆ :)} PS: Je suis Charlie!	[reply]
Re^7: Change default style sheet: add line numbers (counter-increment: codeLineCounter;) by Anonymous Monk on Apr 02, 2015 at 10:56 UTC
That's indeed a good idea, but some browsers lose line breaks when copying. Some which browsers?	[reply]
Re^8: Change default style sheet: add line numbers (counter-increment: codeLineCounter;) by LanX (Saint) on Apr 02, 2015 at 11:25 UTC
At last WebKit based ones, i.e Safari, Chrome, ... Tested on Android 2 & 4 Cheers Rolf _{(addicted to the Perl Programming Language and ☆☆☆☆ :)} PS: Je suis Charlie!	[reply]