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.
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:
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
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.
Postar um comentário