Adicionar Syntax Highlighter para Blogs

Syntax Highlighter (ou  Realce de sintaxe) é uma funcionalidade disponível em alguns editores de texto que apresenta texto — em especial código fonte — numa formatação específica para cada categoria de termos. A mudança da formatação envolve alterações da fonte tipográfica, e principalmente, da coloração do texto. Essa funcionalidade facilita a escrita em linguagens estruturadas como linguagens de programação ou linguagens de marcação, já que as estruturas e os erros de sintaxe são facilmente distinguidos. [1]

Esta funcionalidade, já presente em várias IDEs, é muito desejável em Blogs de desenvolvedores, já que é comum a publicação de trechos de código-fonte para compor o artigo.

Infelizmente, ao menos até a data de publicação deste artigo, este recurso não esta presente no editor de postagem do Blogger, fato que me motivou a procurar uma solução prática.

A solução a ser apresentada se baseou em um post no  bloggermint [2], que usa a biblioteca de javascript e css do  SyntaxHighlighter, uma aplicação html/css/javascript bastante popular, para incorporar esta funcionalidade a sites.

Em resumo, devemos baixar o  SyntaxHighlighter, colocar os arquivos JS e CSS em uma área pública na net, fazer referência a eles no head do Blogger e seguir uma convenção bem simples ao postar um  código-fonte, vejamos;

1 - Faça download do  SyntaxHighlighter.

2 - Coloque, ao menos os seguintes arquivos, em uma área pública na net, no meu caso coloquei em uma pasta do meu site no google. (Estes arquivos estão na pasta onde foi descompactado o arquivo baixado).

• ..\styles\shCore.css
• ..\styles\shThemeDefault.css
• ..\styles\shCoreDefault.css
• ..\scripts\shCore.js
• ..\scripts\shBrushJava.js
• ..\scripts\shBrushCss.js
• ..\scripts\shBrushJScript.js
• ..\scripts\shBrushXml.js
• Adicione arquivos conforme o tipo de código deseja formatar

3 - Modifique o cabeçario do seu Blog, para isto selecione "Visão geral" > "Modelo" > "Editar HTML" > "Prosseguir", dentro da tag <head>, insira o código abaixo, alterando as URLs dos arquivos;

4 - Siga a seguinte convenção ao postar um código fonte no artigo;

<pre class="brush: java">

import java.util.Properties;

public class Testar {

  public static void main(String[] args) {

     System.out.println("Teste!");

  }

}

</pre>

O código html acima vai gerar a seguinte formatação;

import java.util.Properties;

public class Testar {
  public static void main(String[] args) {
     System.out.println("Teste!");
  }
}

Observe que o atributo class da tag <pre> é que vai definir como o código será formatado, no exemplo acima foi utilizado o padrão java, podem ser utilizados outros, como js, css, xml e etc.

Referências:
[1] http://pt.wikipedia.org/wiki/Realce_de_sintaxe
[2] http://www.bloggermint.com/2010/02/how-to-add-syntax-highlighter-for-bloggerblogspot/