Após um tempo sem postar, devido a alguns trabalhos que estou fazendo, finalmente consegui arrumar algo que é do interesse de quem escreve sobre tecnologia, especificamente programação.

Uma das coisas que deixam um site, blog, ou postagem de fórum que trate de programação mais elegante é o realce da sintaxe de códigos de programação.

Código identado, palavras-chave com cor diferente dos identificadores são itens que deixam um código de programação mais agradável para os nossos olhos.

Aqui no NeoMatrix Tech eu faço uso do plugin “Code Snippet”, do Windows Live Writer para fazer a formatação dos códigos de programação que coloco nas postagens.

Usá-lo é simples: copia-se o código que se deseja formatar para a área de transferência, chama o plugin Code Snippet do WLW, cola-se o conteúdo no editor dele, escolhe a linguagem e clica OK e seu código aparecerá formatado no post.

O senão deste plugin, além do suporte a linguagens majoritariamente da Microsoft (C#, VB, TSQL), além de (X)HTML, CSS, JavaScript) é o código HTML que ele coloca no post.

Se vocês tiverem curiosidade de ver como fica, basta ver qualquer post em que eu coloquei código de programa e dê uma olhadinha no fonte HTML dele: A área onde é gerada o snippet fica gigante!

Outro senão dele é que dependendo da largura do contêiner onde fica o snippet, o realce das linhas alternadas não fica após uma determinada largura (principalmente se faz uso do overflow em div’s).

Lendo este post no blog do Chris Benseler, vi que existe uma alternativa para fazer este realce de código, só que sem aquele HTML monstro que é gerado pelo “Code Snippet” do WLW: Trata-se da bibiliteca JavaScript Syntax HighLighter.

Com ele, basta colocar o seu código de programação em tags <pre></pre> e configurá-lo com um atributo class específico da linguagem que deseja realçar sintaxe.

Veja um exemplo:

public class TMeuArquivo : TEDIFile
{
	public override void DecodeLine(string Line)
	{
		this.Lines.Add(new TRegistroEDI());
		this.Lines[Lines.Count - 1].LinhaRegistro := Line;
		this.Lines[Lines.Count - 1].DecodificarLinha();
	}
}

Se vocês olharem o HTML desta página, verá que o código C# acima está em uma tag pre com o atributo class=”brush: c-sharp”. Esta classe CSS, chamada de “brush”, indica ao plugin qual linguagem será usada para realçar a sintaxe. Uma lista completa das linguagens está no site do desenvolvedor, assim como estão as instruções detalhadas de como utilizar.

Outra vantagem desta biblioteca são os botões que ficam do lado direito do código, que aparecem quando repousamos o mouse: Visualizar o código-fonte no visualizador de código-fonte do navegador, copiar para o clipboard (sem a formatação) e imprimir.

Isto é muito útil quando queremos copiar esse código para outro lugar, por exemplo, a IDE, para que possamos fazer um teste.

Mais uma vantagem é que ele não gera aquele HTML monstro para um simples código a ser formatado, o que representa um download menor para o usuário e um upload menor para o dono do site.

Inclusive, ele respeita as dimensões da coluna da postagem do blog, fazendo a quebra da linha e colocando marcas na nova linha que foi gerada a partir da quebra :-)

Os senões desta biblioteca são, basicamente: temos que fazer o escape de todas os sinais de maior “>” e menor “<”, pois o navegador interpreta o que estiver entre eles como HTML. Mas isso pode ser feito rapidamente com o recurso de conversão de caracteres HTML do plugin TextFX do Notepad++ (download mais do que recomendado!).

Outro senão que achei durante os meus testes é que colocando a tag pre dentro de um div com altura fixa, e overflow = auto, na home do blog o código não apareceu por completo. Mas ao entrar na página do post apareceu normalizado.

Conclusão: O “Code Snippet” do Windows Live Writer já pode ir preparando o chinelão…

Desenvolvedor: Alex Gorbatchev
Site da biblioteca: SyntaxHighlighter

[]’s a todos!

[Via: Chris B – Idéias e Pensamentos]