Line Numbers for Code Listings

I always wanted to have the code listing on the site  with “line numbers’. Unfortunately, most of solutions using JavaScript and CSS, require special formatting for the code wrapped  with <pre> tag. So, I’ve borrowed the code (Source: Provide Line Numbers for Your Code Listings | CodeAnimal), modified a little JavaScript and CSS to work with single or multiple tags…

modified JavaScript code

jQuery(function($) {
  $('pre').each(function(index, element) {
    var temp = $(this).html().split('\n');
    var insert = "";
    $.each(temp, function() {
        insert += '<span class="line">' + this + '</span>';
    });
    $(this).html(insert);
  });;
});

modified CSS

pre {
    counter-reset: linecounter;
    background-color:transparent;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    overflow:auto;
    max-height:300px;
}
pre span.line{
    margin:0;
    counter-increment: linecounter;
    white-space:nowrap;
    display:block;
    padding-left:2.5em;
}
pre span.line:before{
    color: rgba(0,102,51,1);
    text-align: right;
    content: counter(linecounter);
    width: 2em;
    display: inline-block;
    border-right: 2px solid rgba(204,255,153,1);
    margin-right: 10px;
    padding-right: 10px;
    margin-left:-2.5em;
}
pre span:nth-child(2n+1) { background-color:rgba(204,204,204,.25); }
pre span:hover { background-color:rgba(255,255,204,1); }

alcher