O NeoMatrix Tech está de casa nova!

Você deverá ser redirecionado em 6 segundos. Se não, visite:
http://www.leonelfraga.com/neomatrixtech
e atualize seus favoritos.

Aviso IMPORTANTÍSSIMO!

Aviso aos navegantes:

O NeoMatrix Tech mudou de casa!!!

A partir de agora, acessem pelo novo endereço:

http://www.leonelfraga.com/neomatrixtech

Ué... mas é só o domínio mudou de lugar?

R: Na verdade, não é bem assim hehe. Este domínio que você acessa agora aponta para um blog hospedado no Blogger, enquanto no novo, aponta para um blog na plataforma Wordpress, hospedagem própria, muito mais rápida e com um layout mais agradável de ler ;)

Não vou fechar este domínio igual ao que eu fiz com o NM Light (que já está 100% na nova plataforma). Talvez beeeeeeem depois eu faça isso.

Todos os posts daqui se encontram lá, e novos posts serão colocados somente no novo endereço.
A única coisa que não consegui importar foram os comentários. Mas em breve vai ter um post contando sobre a epopéia que foi migrar o NeoMatrix Tech!

Somente vou fechar a área de comentários daqui. Caso queiram comentar, favor ver o post correspondente no "Novo NeoMatrix Tech" e comentem por lá. É bem melhor! (pena que os permalinks "amigáveis para SEO" não funcionam lá, dá erro 404 e não consigo fazer a configuração funcionar. E olha que eu já vi vários artigos falando desse assunto :( ).

Quem assina o feed, já está lendo o conteúdo do novo NeoMatrix Tech!

sábado, 18 de julho de 2009

Plugin para realce de código em sites/blogs: Syntax HighLighter

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]

1 comentários:

Diogo Menezes 18 de out. de 2009, 23:26:00  

Olá, fiz um controle de Syntax HighLighter para .net.

Você pode colorir o código em varias linguagens de programação.

Veja como é fácil de usar e depois baixe o código da versão 2.0.

http://www.dmenezes.com.br/Artigos.aspx?t=DmgSyntaxHighlighter-formatando-e-colorindo-c%C3%B3digos#artigo

http://www.dmenezes.com.br/Artigos.aspx?t=DmgSyntaxHighlighter-2.0-formatando-e-colorindo-c%C3%B3digos#artigo

Abraços


Postar um comentário

Para tornar este artigo ainda mais interessante, escreva suas críticas (desde que construtivas e sem ofenças), elogios, sugestões, complementos, dúvidas, etc, etc, etc!!!

Sobre o NeoMatrix Tech

Meu blog para assuntos profissionais, ligado com tecnologia.
Dicas de programação (grande parte de C# e ASP.NET, mas não limitado a essa plataforma :-) ), dicas de utilitários, análises de equipamentos e serviços, resenhas sobre sites que eu visito, relacionados com tecnologia, opinião sobre mercado de trabalho, metodologias de desenvolvimento, comportamento no mundo tecnológico...

NeoMatrix Light

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008 - Editado e configurado por Leonel F.

Voltar ao TOPO