WP-Syntax: destacar códigos fonte em artigos de blogs WordPress

Para quem tem blogs WordPress que tratam de assuntos relacionados à programação, softwares, linguagens de marcação, estilos e afins, uma das grandes dificuldades é escrever artigos explicativos e evidenciar corretamente os códigos de marcação e programação nestes, através de uma sintaxe estilizada e compreensível.

Alguns criam regras CSS para utilizar em trechos dos códigos que apresentam, criando diversas classes, para estilizar diversas cores de texto com a propriedade “color”. Entretanto, a aplicação deste monte de classes em um código, além de ser demorada e sua implementação desgastante para o autor do post, apresenta o inconveniente de ser dificilmente manutenível.

Para apresentar diversos tipos de códigos em posts de blogs WordPress, existe uma solução melhor, mais rápida, prática e que utiliza uma das principais vantagens desta plataforma: a extensibilidade de suas funções através de plugins.

Sobre o plugin WP-Syntax

WP-Syntax é um ótima extensão WordPress para exibir códigos com sintaxe de fácil visualização e de forma inteligível. Quando se usa o plugin, é possível exibir códigos-fonte coloridos (coloração automática) com ou sem numeração das linhas. Para quem lê o artigo é excelente, já que ele provê uma sintaxe limpa e permite selecionar o código através do próprio navegador.

O sistema de highlighting do WP-Syntax é feito usando o GeSHi (Generic Syntax Highlighter), que já é conhecido entre alguns desenvolvedores web devido à sua facilidade de implementação e simplicidade de uso.

Funcionando do WP-Syntax

O uso do WP-Syntax é simples e seguro; ele evita conflitos com outros plugins de terceiros, executando “filtros” que garantem a compatibilidade geral com outras extensões, conferindo um resultado ótimo, que é a formatação dos códigos-fonte e exato destaque da forma como se quer e precisa.

Instalação e uso do WP-Syntax

Este plugin é todo fácil de usar, desde sua instalação ao momento de exibir códigos formatados nos posts.

Instalação

A instalação do WP-Syntax é feita da maneira “tradicional”:

1. Baixar o plugin;
2. Descompactar o conteúdo do arquivo zipado dentro da pasta padrão de plugins do WordPress, o que irá resultar na seguinte hierarquia de diretórios: wp-content/plugins/wp-syntax/;
3. Ativar o plugin na área “Complementos” (Plugins) do painel de controle WP;
4. Começar a usar o WP-Syntax.

Como usar o WP-Syntax

Tirar proveito das funcionalidades do WP-Syntax é bastante simples. Enquanto escreve um artigo, vá até o modo de edição de código em seu tinyMCE – aba de nome “HTML” se você usa o modo de edição gráfica -  e englobe o código que você quer que fique estilizado entre tags pre. Para configurar o plugin in-line, é preciso informar:

• Qual linguagem será usada (necessário);
• Se haverá numeração de linhas (opcional).

Então, para colocar um trecho de código PHP com numeração de linhas, por exemplo, ficaria da seguinte maneira:

<pre lang=”php” line=”1″>

[...] código [...]

</pre>

Veja o plugin em funcionamento:

1
2
3

for ($i = 1; $i <= 11; $i++){
    echo $i . ', ';
}

Basta retirar o atributo “line” para o código iserido aparecer sem a numeração de linhas; caso se queira iniciar a contagem em número diferente, basta informar: line=”23″. Faça o teste e selecione o trecho de código acima; perceba que é possível fazer a seleção e colar onde se queira sem que a numeração também vá para a área de transferência.

Algumas das linguagens de programação e marcação que o WP-Syntax suporta são:

• ASP;
• C;
• D;
• CFM;
• CSS;
• HTML;
• Java;
• Javascript;
• mySQL;
• Oracle 8;
• Perl;
• PHP;
• Python;
• Ruby;
• E mais de 70 outras linguagens.

Um dos grandes benefício do WP-Syntax é que ele tem diversos “esquemas” de cores, um para cada linguagem de programação, estilo ou marcação escolhida, o que facilita a inserção de diversos trechos, de várias linguagens, em um só artigo, de modo a evidenciar a diferença entre todas, facilitando a leitura e entendimento do leitor.

Algo importante sobre o uso do WP-Syntax

Este aviso é somente para os que utilizam o editor gráfico para escrever artigos; os que utilizam somente o modo código, nem precisam ler este aviso.

Aconselho, ao usar o WP-Syntax para destacar códigos-fonte em seu artigos, a primeiro escrever as partes do post que são “texto comum”, como explicações, etc e, por último, passar ao modo HTML e inserir os códigos necessários.

E mais: ao editar um artigo já escrito com uso do WP-Syntax, vá até outro artigo qualquer, passe para o modo de edição HTML e, somente depois disso, edite o arquivo que usou o plugin.

O motivo para ambos é que o editor gráfico do WordPress interpreta as tags existentes para as renderizar corretamente enquanto se escreve o post (negrito, itálico, etc). Então, como se está inserindo código “interpretável” por ele, é arriscado, dependendo da linguagem que se esteja usando no WP-Syntax, como HTML, por exemplo, de, no momento em que se passa para a edição em modo gráfico, o editor do WordPress apagar as tags que você usou em seu artigo, com o WP-Syntax.

Nosso colega Rafael Biriba escreveu um excelente artigo sobre como utilizar os modos Visual e HTML com WP-Syntax sem strip tags.

Conclusão

Pessoalmente, quando ainda desconhecia a existência de um plugin que destaca códigos-fonte em artigos, como este, utilizava a “técnica” de criar diversas classes CSS para estilizar códigos que colocava nos posts. Posso garantir que não é a melhor das experiências, principalmente para o caso de ter que fazer manutenção no código…

O melhor, mesmo, para os casos de inserção de código diretamente em posts, para quem usa WordPress, é utilizar o plugin WP-Syntax, que, primando pela simplicidade e facilidade de uso, além de possuir excelente suporte às mais de 70 linguagens de programação, estilo e marcação citadas, atende perfeitamente a finalidade para que foi criada, permitindo que o autor dos artigos mostre códigos a seus visitantes com uma sintaxe colorida, focando na facilidade de compreensão e entendimento dos códigos.