This little plugin takes a code block: "<pre><code></code></pre>" And turns it into a nice little scroll-able div with line numbers for the code.

jquery.precode_linenumbers.js

    (function($){
      
        $.fn.linenumbers = function() {

            return this.each(function() {
                var $block = $(this);

                if ( $block.parent().is("pre") )
                {
                    $block.unwrap();
                }
                var str = '<div class="code-wrap"><table class="code-table" border="0" cellpadding="0" cellspacing="0">';

                var lines = $block.html().trim().split(/\n/);

                // Gutter
                var llen = lines.length;

                str += '<tr><td class="code-lines"><pre>';

                for (var i=1; i<=llen; i++)
                {
                    str += '<div class="line" id="L'+i+'" rel="L'+i+'">'+i+'</div>';
                }

                str += '</pre></td>';

                // Code

                str += '<td class="code-block"><pre>';
                $.each(lines, function(index, value) {
                    if (value == '') value = '&nbsp';
                    str += '<div class="line" id="LC'+index+'" style="">'+value+'</div>';
                });

                str += '</pre></td></tr></table></div>';

                $block.replaceWith(str);
            });

        };

    })(jQuery);