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);
  });;
});

Continue Reading