Como postar códigos em sites usando o SyntaxHighlighter

Um recurso muito útil para blogs e sites sobre programação é o SyntaxHighlighter. Essa ferramenta, desenvolvida em JavaScript, cria caixas de texto para códigos-fonte de programas, com numeração de linha e coloracção (highlight) de código.

O SyntaxHighlighter possui módulos para diversas linguagens, dentre elas Bash (Shell Script), C#, C, C++, CSS, Delphi, JavaScript, Java, Perl, PHP, Python, Ruby, SQL e XML, com sistema de coloração específico para cada uma delas, além de possuir uma caixa de texto simples, para texto comum (plain text).

Esse recurso também possui diversos temas por padrão, mas, logicamente, você pode criar um tema próprio para se adequar ao seu site ou blog. Os temas disponíveis podem ser visualizados por meio deste link.

Alguns exemplos do SyntaxHighlighter podem ser vistos no site oficial. As demonstrações que constavam aqui foram removidas pois deixei de usar o Syntax Highlighter, para usar o WP-Syntax.

É muito simples instalar o SyntaxHighlighter. Basta baixar o arquivo fonte e inserir algumas linhas em seu HTML, fazendo a inserção dos arquivos necessários.

Inserindo o arquivo principal do SyntaxHighlighter:

<script type="text/javascript" src="caminho/para/o/syntaxhighlighter/scripts/shCore.js"></script>

Feito isso, basta inserir os arquivos referentes às linguagens cujos códigos-fonte serão postados, a fim de habilitar a coloração para cada uma delas.

<script type="text/javascript" src="caminho/para/o/syntaxhighlighter/scripts/shBrushLINGUAGEM.js"></script>

Onde “LINGUAGEM” deverá ser substituída por cada uma das linguagens que serão utilizadass. Obtenha a lista completa aqui.

Incluiremos mais duas linhas referentes ao tema utilizado.

<link rel="stylesheet" type="text/css" href="caminho/para/o/syntaxhighlighter/styles/shCore.css" />
<link rel="stylesheet" type="text/css" href="caminho/para/o/syntaxhighlighter/styles/shThemaNOME_DO_TEMA.css" />

Onde “NOME_DO_TEMA” deverá ser substituído pelo nome do tema que deseja utilizar. Obtenha a lista completa aqui. Como citei antes, você pode criar o seu próprio tema, adicionando apenas a primeira linha acima e criando um novo arquivo CSS com as mesmas regras presentes nos shTheme*.css.

Por fim, vamos iniciar o SyntaxHighlighter com o seguinte trecho JavaScript:

<script type="text/javascript">
 SyntaxHighlighter.all();
</script>

A partir daí o SyntaxHighlighter já está funcionando. Porém, é possível fazer diversas outras configurações. Uma delas é desabilitar a barra de ferramentas que é exibida por padrão, inserindo a seguinte linha acima de “SyntaxHighlighter.all();” no código acima:

SyntaxHighlighter.defaults['toolbar'] = false;

Veja todas as configurações aqui.

Para quem não possui um sistema de hospedagem próprio, não tendo onde hospedar os arquivos do SyntaxHighlighter, o site oficial mantém uma cópia online de todas as versões da ferramenta. Veja neste link.

Mais informações e detalhes sobre o SyntaxHighlighter poderão ser encontradas no site oficial.

Porém, há um “problema” quando se postam códigos muito extensos. O SyntaxHighlighter não gera barras de rolagem, deixando a página muito extensa e cansativa para o usuário. A solução é simples: HTML e CSS.

Basta inserir a tag <pre> do código dentro de uma DIV com “overflow: auto“.

Uma possível (e simples) regra CSS para essa DIV é a seguinte:

.codeBox
{
    width: 850px;
    height: 550px;
    overflow: auto;
    margin: 2px 0;
    padding: 0;
    border: solid 1px #666;
}

Assim, basta inserir seus códigos da seguinte maneira:

<div class="codeBox">
<pre class="brush: linguagem">
código aqui