Pular para o conteúdo principal

SyntaxHighlighter no Blogger

Existe uma maneira muito interessante de se colocar um código fonte em uma postagem de blog, este pode aparecer da mesma forma que em um IDE, ou seja, formatando com texto colorido, fontes diferentes e outras formatações que dão um bom estilo e clareza ao código apresentado.

Com o objetivo principal de reduzir o tempo gasto com essa análise de sintaxe e formatação manual de códigos que são postados em blogs e websites, o SyntaxHighlighter surgiu como projeto open source, desenvolvido em javascript, hospedado no site http://alexgorbatchev.com e da suporte aos desenvolvedores para mostrarem seus códigos de forma elegante, independente de qual seja a linguagem de programação.

A instalação e a configuração são simples. abaixo um exemplo de utilização:


// Código sem syntaxhighlighter

package exemplosblogcorda4;
public class PostZero {
public static void main( String args[]){
System.out.println("Primeiro post ! ! !");
System.out.print("Olá mundo ! ! !");
}
}

Um detalhe interessante da versão mais nova é que pode-se deixar de utilizar a tag <pre> para utilizar a tag <cdata> permitindo que o código possa ser facilmente transferido para a postagem sem precisar de nenhuma edição prévia para remoção de algum caractere especial ou de outro idioma, somente copiando o código da sua IDE preferida e colando no post.

De funcionalidades adicionais o SyntaxHighlighter inclui a numeração automática das linhas do código, visualização do código original sem formatação, cópia do código para a área de transferência e impressão do código formatado.

No projeto existe alguns arquivos de CSS que você pode escolher de acordo com a sua preferência para definir o estilo que seu código que será mostrado. ex:


<link href='styles/shThemeEclipse.css' id='shTheme' rel='stylesheet' type='text/css'/>

Se for utilizar o SyntaxHighlighter no Blogger não esquecer de incluir a linha abaixo no script de configuração:
SyntaxHighlighter.config.bloggerMode = true;

Comentários