sábado, agosto 23, 2008

Usando o Syntax Highlighter

Uma coisa que sempre me incomodou é a baixa qualidade da apresentação dos trechos de código que coloco aqui no blog. Por sugestão de um dos meus leitores, o Breno, resolvi utilizar o Syntax Highlighter.

O Syntax Highlighter é composto por um sylesheet e uma série de rotinas em Javascript para formatar código usando cores para indicar os vários tipos de elemento na sintaxe. Ele suporta várias linguagens.

As dicas de instalação em um blog hospedado no Blogger que listo a seguir são uma adaptação do que se encontra aqui.

O primeiro passo é fazer o download no seu micro da versão mais atual do Syntax Highlighter. Exandindo o arquivo baixado, temos três diretórios:
  • Scripts: contém os scripts Javascript e um arquivo flash (clipboard.swf). No mínimo você precisa do script shCore.js e do script para as linguagens desejadas. O clipboard.swf é para permitir copiar o código exibido para o clipboard.
  • Styles: tem o stylesheet SyntaxHighlighter.css. Você vai precisar dele
  • Uncompressed: os scripts no diretório Scripts estão sem comentários e sem espaços em branco para reduzir o tamanho do download na página. Neste diretório estão as versões completas, para quem quiser examinar o código.
A parte mais complicada é achar algum lugar para hospedar os arquivos. Acabei optando por usar Google Code, espero não estar infringindo as regras de uso.

O passo seguinte é colocar os comandos apropriados no template do blog. Isto é feito na opção Edit Html do Layout. Em algum lugar entre <head> e </head> é preciso incluir o stylesheet e os scripts:

<link href='http://dqsoft.googlecode.com/files/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://dqsoft.googlecode.com/files/shCore.js'></script>
<script language='javascript' src='http://dqsoft.googlecode.com/files/shBrushCpp.js'></script>

Imediatamente antes do </body> deve ser chamada a rotina que faz a formatação:

<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://dqsoft.googlecode.com/files/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

No post, os trechos de código devem esta indicados como abaixo:

<pre name="code" class="Cpp">
código
</pre>

O resultado final pode ser visto abaixo:

void main()
{
int a, b, c;

for (a = 1; a < 5; a++)
{
b = 5*a;
c = b - 3*a;
printf ("%d %d %d\n", a, b, c)
}
}


Obs.: parece que ainda não está perfeito. Aparece corretamente no IE7, mas no Firefox não está usando o stylesheet...

Atualização em 26/ago/08: Já está funcionando. A resposta curta é que Google Code não é um bom lugar para colocar o stylesheet. A resposta longa vai num novo post.

2 comentários:

Anônimo disse...

Olá Daniel, tudo bem?
Que bom que gostou da idéia e resolveu incluir a sintaxe pra códigos aqui no blog.

Sobre os problemas para exibição no FireFox, pelo que entendi, você colocou a chamada para os scripts de clipboard, bloggermode (Não me lembrava dessa chamada), etc, antes da tag '/body'. Geralmente, em HTML, estas chamadas são feitas dentro do bloco 'head' '/head'.

Uma outra sugestão é verificar se as chamadas ao site para os scripts estão corretas para o FireFox também. Tente usar para testes, a mesma chamada do site que você indicou: http://morten.lyhr.dk/2007/12/how-to-get-syntax-highlighting-in.html

Chamadas para este endereço: http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Styles/SyntaxHighlighter.css

E verifique o que pode estar acontecendo...

No mais, ficou muito legal... Parabéns...

OBS: Como a edição de comentários não aceita os sinais de 'maior que' e 'menor que' que representam o início e o fim das tags em HTML, eu utilizei aspas simples ''.

[]s

Daniel Quadros disse...

Breno,

Como anotei no post, já está funcionando. O curioso é que o problema acontece tb acessando o stylesheet do mortenlyhr.googlecode.com. A solução, como detalho em um novo post, foi colocar o stylesheet diretamente no template do blog.