Caixa de código com contador de linhas

Você já viu o efeito do Virtual Arts, onde a caixa de código tem aquele lindo contador de linhas, e você gostaria de saber como fazer em seu fórum Forumeiros?

O FdF publicou mais esta solução de webdesign para seus fóruns, afim de deixar as caixas de code com uma aparência muito interessante!

Trabalhando o código

PHPBB2

Código:

jQuery(document).ready(function(){jQuery('div.cont_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>')}})});
jQuery(document).ready(function(){$("td.code").prepend("<style>td.code{overflow-y:auto;overflow-x:auto;max-height:200px}td.code
 
pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px
 solid #6CE26C;margin-top:-5px
!important;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream
 Vera Sans Mono,Courier New;padding-right:8px}td.code,
div.cont_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:4px}td.code{overflow-y:auto;overflow-x:auto;max-height:200px}</style>");});

PHPBB3

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>')}})});jQuery(document).ready(function(){$("code").prepend("<style>.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}</style>");});

PUNBB

Código:

jQuery(document).ready(function(){$("code").prepend("<style>.codebox
 dd{overflow-y:auto;overflow-x:auto;max-height:200px}.codebox dd
pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px
 solid
#6CE26C;margin-top:-4px;color:#A8A5A5;margin-right:5px;font-family:Consolas,Bitstream
 Vera Sans Mono,Courier New;padding-right:8px}.codebox
dd{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}.postbody dl.codebox
dd{overflow-y:auto;overflow-x:auto;max-height:200px}</style>");});

INVISION

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>')}})});jQuery(document).ready(function(){$("code").prepend("<style>.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:-1px;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}</style>");});

Lembre-se: Ao se trocar de versão, não se esqueça de trocar também o código!

Criando uma página Javascript para suportar o código
Vamos criar uma página Javascript, para que suporte o nosso código, assim ele funcionará nos tópicos.

Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos Javascript

Clique em "Criar um novo Javascript"

Vamos configurar a página. Coloque o título desejado, e na parte Investimento, selecione "Em todas as páginas", para que o código funcione sem problemas. Aproveite e veja nosso tutorial de Guias, slides e outros scripts nos tópicos para descobrir o motivo do Investimento obrigatóriamente ser em todas as páginas.

No campo código Javascript, insira o código que trabalhamos no passo 1.

Clique em Confirmar. Vá ao seu tópico, dê um refresh na página e verá que as caixas de código já têm o contador de linhas.

Outcome:

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>')}})});jQuery(document).ready(function(){$("code").prepend("<style>.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}</style>");});

Logo estaremos ensinando a colocar cor nas tags, como aqui no Virtual Arts!

Espero ter ajudado e até a próxima!
[/center]