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”:
- Baixar o plugin;
- 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/;
- Ativar o plugin na área “Complementos” (Plugins) do painel de controle WP;
- 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.
Amigão, essa dica é de ouro. Estava mesmo necessitando disso lá para o Wordpress-Love! Breve vou citá-lo sobre esse artigo. Grande trabalho :D
@ Paulo Faustino
Obrigado, Paulo! Bem que eu vi artigo no WP-Love com códigos-fonte e sua apresentação vai ficar realmente bem melhor com um destaque como esse!
Abraços!
Andava à procura de um plugin desses, brigado. Cumprimentos
@ Alexandre Pereira
De nada, Alexandre! Bom saber que minhas indicações estão realmente ajudando! Agora o BlogTuga fica ainda melhor!
Abraços e obrigado pela visita!
Olá amigo me interesseio muito por esse plugin. Mas quero fazer uma pergunta de principiante.
Eu criei uma conta no WP mas não tenho nada na minha máquina, pelo que vi deve escrever os artigos num editor diponível no proprio site do WP nesse caso como se instala esse plugin!?
Ou eu estou falando alguma bobagem?
Cristiano, use
[ sourcecode="java" ]
//code here
[ / sourcecode]
coloquei os espaços para poder aparecer aqui, quando usar nao use espaços…
I love this plugin! However, I have found one plugin that it does not work with…
Well, I’ll rephrase… It breaks the other plugin, but it still works. I’ve tried running WP-Syntax along with WP-Facebox and it breaks the facebox plugin.
I’ve deactivated and reactivated several times, and it’s definitely the problem. Have you any ideas what could be causing this?
@ Josh
Must be some conflict between them … Though I do not know the plugin you said, I believe the ideal is to have only one activated. Anything else, just say! Great regards!
Vlew pela dica show de bola! ;-)
@ Henrique
De nada! Volte sempre! ;-)
Fala cara blz?
Bom, no meu blog aparece o seguinte erro:
Warning: preg_match() [function.preg-match]: Compilation failed: unrecognized character after (?< at offset 3 in /home/raphaelmonr/public_html/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2132
Warning: preg_match() [function.preg-match]: Compilation failed: unrecognized character after (?< at offset 3 in /home/raphaelmonr/public_html/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2132
Alguma dica?
Abraço!
@ Raphael Monroe
Sinceramente, não faço ideia do que possa ser isso… Faça o seguinte, desinstale o plugin, remova a pasta dele, faça download da versão mais atual e instale normalmente.
Se ainda assim persistir, então você deve conferir se já não usa algum outro plugin que também faça uso do GeSHi, pois pode haver um conflito, aí!
Amigão, aqui vai algumas dicas sobre suas citações:
“, 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.”
Voce se refere ao “strip tag” que o TinyMCE ( editor do wordpress ) faz no texto !
Recomendo que leia meu post: http://www.rafaelbiriba.com/2009/06/11/wordpress-271-com-syntax-highlight.html
Fala sobre isso, e maneiras de como utilizaro editor de texto e editor html do wordpress sem problemas e sem strip tags…
Abraços,
@ Rafael Biriba
Muito obrigado pela dica, essa é de ouro!!! Apareça! ;-)
Pode deixar que passarei sempre por aqui, atrás de novidades ! ;)
Abraços,
Fala Tárcio, vi o seu post, instalei o plugin wp-syntax mas meu código não fica colorido, por favor, da uma olhada se fiz algo errado:
abs
ops…:
<pre lang=”javascript” line=”1″><code><script type=”text/javascript” src=”js/jquery-1.3.2.js”"></script”></code></pre>
@André Francisco
Só precisa da tag pre com os atributos, mais nada. Tem “code” demais, ai! rsrs
Valeu Tárcio, tirei o code, também precisei do TinyMCE Valid Elements pra cadastrar a tag pre, o Rafael me deu uma força…
abs
Talvez o Tárcio saiba… Mas acho que poucos leitores sabem como é bom ver os posts que fazemos no blog, servindo para ajudar alguém…
Abraços aí ao Tárcio,…
E boa sorte aí André ! ;)
Olá,
Muito boa a dica amigo,hoje eu estava procurando isso mesmo.