quarta-feira, 25 de agosto de 2010

Highlighting de código no seu site

Estava fazendo o CSS do blog e lembrei de uma coisa que já estava querendo fazer e nunca lembrava: colocar um highlighting de código.

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> se 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