Pesquisei e vi que o mais utilizado pela galera é o Syntax Highlighter. Comecei a utilizar ele, porém uma característica dele não me agradou: Ele só pode ser utilizado com a tag
<pre>. O problema da tag <pre> é que quando seu código contém uma linha grande, dependendo do seu layout, ele simplesmente não mostra a linha inteira (o Google Chrome adiciona uma barra horizontal de rolagem, mas mesmo assim fica aparecendo um ícone ? no meio do código) ou mostra a linha passando por cima do que estiver na reta. Por isso eu gosto de usar a tag <code>, o que o Syntax Highlighter não permite. Dessa forma fui buscar outra ferramenta e achei o google-code-prettify.O google-code-prettify além de me permitir usar a tag
<code>, me permite customizar o estilo facilmente via CSS (coisa que o Syntax Highlighter não permite). Olha como é simples usar o google-code-prettify:Passo 1: Adicione esse código na sua página, entre as tags
<head> e </head>:<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>Passo 2: Adicione na tag
<body> um onload='prettyPrint()', ficando assim:...
<body onload='prettyPrint()'>
...Pronto! Agora quando você quiser fazer o highlighting de algum código é só colocar a classe prettyprint na tag
<code>, dessa forma:<code class="prettyprint">
Seu código entra aqui
</code>Só isso?!?! Não preciso falar qual é a linguagem do meu código não?! Não! O google-code-prettify descobre qual é a linguagem e faz o highlighting! =)
Mas se você quiser, pode indicar qual é a linguagem adicionando a classe lang-x onde x é a sigla da linguagem. Você pode ver quais linguagens ele faz o highlighting no README do projeto.
Quer colocar o número das linhas? Simples: adicione a também a classe linenums. Ainda assim não está aparecendo? Isso acontece porque por padrão o google-code-prettify coloca o número da linha apenas para múltiplos de cinco (5, 10, 15, ...). Para colocar o número da linha em todas as linhas, basta adicionar isso no seu CSS:
code ol li {
list-style: decimal !important;
}Dica para que usa o Blogger/Blogspot: Para usar no seu blog, basta adicionar tudo da mesma forma como foi descrito. Lembrando que os passos 1 e 2 devem ser feitos no seu layout, que pode ser editado indo na aba Design e depois em Editar HTML.
Dica para que usa o Gedit: Como esse post tinha alguns códigos em HTML para fazer o highlighting e como para isso tem que escapar as tags HTML substituindo os caracteres < e > pelas suas respectivas sequencias especiais em HTML, adicionei ao Batraquio o snippet Scape HTML tags. Com ele você seleciona um código, aperta Ctrl+Shift+H e ele substitui tudo para você. Assim, você pode escrever seu código normalmente, e quando for fazer o highlighting, usa o snippet. =)
Lembrando que diferentemente da tag
<pre> com tag <code> você precisa adicionar uma tag <br /> ao final de cada linha (no Blogger isso é feito automaticamente).Lembrando também que você pode usar a tag
<pre> ser preferir.É isso ai! Se quiser mudar o estilo, é só adicionar um CSS com uma borda, uma cor de fundo e o que mais achar que fica legal.
Referências:
[ ]'s
