Adicionar linhas de tag de código

Oi tudo que eu quero e eu vou adicionar o código da tag [code] [code] efeito que lista as linhas como na imagem abaixo

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

English version:

I want to customize the code tag line to be listed and be color codes

Exactly as in the demo. Code has color and each line is numbered

Sorry for my language...

Código:

jQuery(document).ready(function(){
jQuery('.postbody dl.codebox dd code').each(function(){
t=1;
if(this.innerHTML.indexOf('<br>')!=-1){
 t='';
 i=1;
while(i<=this.innerHTML.split('<br>').length){
 t+='\n'+i;
i++
};
jQuery(this).before('<pre>'+t+'</pre>');
}
});
});

Código:

.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.postbody dl.codebox pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:2px;color:#A8A5A5;margin-right:5px;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';padding-right:8px}.postbody dl.codebox code{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}

Código:


jQuery(function () {
    if (location.pathname !== '/forum' ) {
        if(!_userdata.session_logged_in) {
            var sContent = '<br><strong>[Você precisa ser<div style="margin: 0 3px 0 3px;display: inline-block;"><a href="/register">registrado</a> e estar <a href="/login">conectado</a></div> para ver o conteúdo.]</strong><br><br>';
            var codebox = jQuery('code').parent().parent();
            codebox.before('<pre class="highlight punbb_block">' + sContent + '</pre>');
            codebox.remove();
        } else {          
            var tagCode = jQuery('code');
            tagCode.each(function () {
                var sContent = jQuery(this).html();
                var codebox = jQuery(this).parent().parent();
                codebox.before('<pre class="highlight punbb_block">' + sContent + '</pre>');
                codebox.remove();
            });
            jQuery.getScript('http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function () {
                jQuery.SyntaxHighlighter.init({
                    'wrapLines': false
                })
            })
        }
    }
});


Código:


pre.prettyprint {
    padding: 2px;
    border: 1px solid #888;
    background: #f0f0f0;
    width: auto;
    border-radius: 5px;
}


Código:

.pun{color:#5a5a5a}

Código:

    .pun{color:#5a5a5a!important}

Código:

.prettyprint ol.linenums li {
border-left: 3px #6ce26c solid; /*modify #6ce26c to color!*/
}