Código fonte formatado no Blogger com SyntaxHighlighter

Muitos posts existem ensinando a utilizar o SyntaxHighlighter, mas não funcionam bem com a nova versão desta ferramenta que utiliza javascript para formatar códigos-fonte de forma legível no seu blog, ou página web.

Ele possui algumas particularidades para serem utilizadas no Blogger, portanto siga os passos abaixo que tudo dará certo de forma simples, sem dores de cabeça.

Primeiramente, vá nas opções do seu blog, selecione a aba Layout e Editar HTML, em seguida cole esse trecho de código abaixo, exatamente antes da tag </head> de sua página:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script> 

Remova dessa lista as linguagens que você nunca utilizará, para agilizar um pouco o carregamento da página.

A principio, a ferramenta já está configurada pois, nesse caso, estou utilizando os arquivos hospedados pelo seu próprio criador, já que o Blogger não disponibiliza um espaço para armazenamento de arquivos. Sempre serão utilizados os arquivos mais recentes com esse endereço.

Caso você queira hospedá-lo em seu próprio host, faça o download aqui e mude os endereços http://alexgorbatchev.com/pub/sh/current para o novo local hospedado.


Agora é necessário utilizar uma tag especial para formatar o código que será apresentado no seu post.
Para isso, coloque seu código fonte dentro da seguinte estrutura, no editor de HTML da postagem:

<pre class="brush: html">

</pre>

Basta trocar o nome "brush: html" pela linguagem que você precisa. Por exemplo, "brush: java".

Dica: Você pode utilizar um encoder html (como este ou este) para remover as tags intrometidas que o código fonte gera dentro da sua página. Cole seu código fonte no editor e copie o código formatado já no formato correto para jogá-lo em sua página.

And thats it! ;]