Há bastante tempo estive a procura de um plugin para fazer a “Syntax Highlight” dos meus códigos no blog. Parece algo simples, mas na verdade foi bem difícil de arrumar. Não é só instalar um plugin e utiliza-lo no blog, é bem pior que isso.

Pra começar que esse editor de texto do wordpress, TinyMCE, é cheio de “removedor de tags” (strip tag), o que dificulta e muito a inserção de códigos especiais. Vamos para os problemas e suas soluções:

Primeiramente, o plugin selecionado para o Syntax Highlight foi o: WP-Syntax ( http://wordpress.org/extend/plugins/wp-syntax/ ). Para utiliza-lo basta colocar as tags <pre lang=”” line=”” escaped=””> e depois </pre>.

O escaped por padrão é falso, não sendo necessário colocar. Serve para substituir os elementos codificados em html. Em outras palavras, quando no código tiver elementos como &lt; (>), ou &amp; (&),  estes são transformados automáticamente. Logo abaixo você entenderá a necessidade de colocar o escaped.

O line por padrão é falso, não sendo necessário colocar. Serve para dizer qual a numeração inicial que você deseja.

O lang é o atributo principal, onde definimos qual a linguagem que iremos utilizar, para que seja marcada corretamente. Você pode usar as seguintes linguagens: actionscript, actionscript3, asp, bash, c, cobol, cpp, csharp, css, delphi, html4strict, java, java5, javascript, mysql, perl, php, python, rails, ruby, sql, vim, whois, xml, ( Lista completa em http://wordpress.org/extend/plugins/wp-syntax/other_notes/ )

Porém o editor de texto do wordpress, não permite o atributos na tag pre e com isso seria impossível utilizar o plugin corretamente. Depois de muitas pesquisas e testes, descobri um plugin ótimo que serve justamente para “habilitar” tags e atributos que o editor não permite. Este plugin é o TinyMCE Valid Elements ( http://wordpress.org/extend/plugins/tinymce-valid-elements/ ). Com uma interface de configuração extremamente simples, você pode adicionar um elemento e depois os seus atributos válidos.

Bom, o primeiro problema já está solucionado. Depois de adicionar o elemento pre e os seus atributos line, escaped e lang, vamos escrever nosso primeiro código.

Vá ao editor de HTML do wordpress e adicione <pre lang=”ruby”>class Example</pre> isso criará uma saída colorida para o código ruby sem numeração.

Agora, se você tentar criar uma saída numerada e com várias linhas, encontrará 2 problemas:
1) O editor do wordpress remove as tags <? ?> caso você precise demonstrar um script php, por exemplo.
2) O css do plugin tem alguns parâmetros que distorce um pouco a tabela, fazendo com que ela seja maior do que o necessário.

Veremos isso na prática. Crie o código abaixo no editor HTML do wordpress:

<pre lang=”php” line=”1″>
<?php
echo “Hello World !”;
?>
</pre>

O editor do wordpress remove tudo que estiver dentro das tags <? ?>, então para resolver o problema 1, basta trocar a < por &lt; e > por &gt; , sendo assim o código ficará assim:

<pre lang=”php” line=”1″ escaped=”true”>
&lt;?php
echo “Hello World !”;
?&gt;
</pre>

Conforme eu expliquei acima, foi necessário incluir o escaped=”true” para que os elementos html sejam devidamente transformados. Neste caso para que os elementos < > sejam exibidos corretamente.

A Saída do código acima firá assim:

O problema 2 é exatamente o tamanho que a tabela ficou! O css faz a tabela se estender até o fim da página, tornando ela exageradamente grande ! Vamos para a correção:

Abra o arquivo \wp-content\plugins\wp-syntax\wp-syntax.css e faça a seguinte alteração, logo no primeiro elemento .wp-syntax:

.wp_syntax {
color: #100;
background-color: #f9f9f9;
border: 1px solid silver;
margin: 0 0 1.5em 0;
overflow: auto;
}

Os parametros de background-color e border que estão distorcendo a tabela. Basta remover as linhas em negrito OU caso não queira deletar, basta comentar este trecho do código com (/* e */). Ao final salve o arquivo !

Agora ao executar o nosso código de teste, a saída será:

1
2
3

<?php
echo "Hello World !";
?>

Bom, acho que isto é tudo ! Qualquer dúvida é só perguntar ! 😉

Detalhes: Caso você venha atualizar o plugin wp-syntax, o css será substituido pelo padrão. Então você terá que alterar o css toda vez que atualizar o plugin, ou então deixe tabela distorcida mesmo… 🙂