Publique códigos em seus posts com o SyntaxHighlighter

Blogs como o pBlog, onde vez ou outra aparecem códigos nos posts a fim de auxiliar os leitores, precisam dar mais atenção a este aspecto. Foi pensando nisso que implementamos por aqui o plugin SyntaxHighlighter, uma solução elegante e muito funcional para essa velha problemática.

Este plugin, na realidade, simplesmente traz para o WordPress, de maneira facilitada, o excelente JavaScript syntaxhighlighter, criado por Alex Gorbatchev. Isso quer dizer que as mesmas facilidades que este plugin traz podem ser usufruídas em outros projetos; basta pegar o código original, e adaptá-la, tal qual os desenvolvedores do plugin que ora explico fizeram.

A instalação segue o bom e velho esquema padrão do WordPress: baixe o plugin, descompacte-o, e envie a pasta (inteira) syntaxhighlighter para a /wp-content/plugins/. Depois, ative-o no painel administrativo, na guia Plugins, e ele estará pronto para uso.

O uso é simples. Quando for escrever um código, basta colocá-lo entre as tags especiais do plugin, e automaticamente o código gerado na saída estará formatado de acordo com a linguagem escolhida. O código tem uma estrutura própria: [ source language='css' ] /* aqui vai o código inteiro! */ [ /source ]. Note que utilizei espaços apenas para que o código não fosse convertido, pois caso fizesse certo, ou seja, tudo grudado, o resultado seria esse abaixo:

/* aqui vai o código inteiro! */

Há suporte a várias linguagens, cada uma com um código próprio, que deve ser inserido no atributo language='', de acordo com a desejada. Confira as linguagens suportadas, e seus respectivos códigos:

  • C++ — cpp, c, c++
  • C# — c#, c-sharp, csharp
  • CSS — css
  • Delphi — delphi, pascal
  • Java — java
  • JavaScript — js, jscript, javascript
  • PHP — php
  • Python — py, python
  • Ruby — rb, ruby, rails, ror
  • SQL — sql
  • VB — vb, vb.net
  • XML/HTML — xml, html, xhtml, xslt

Outro detalhe legal do plugin, é que no topo há atalhos úteis, como imprimir (print), copiar o código para a área de transferência (copy to clipboard) e ver em modo texto normal (view plain). No pBlog, aparentemente tais atalhos não estão funcionando; estamos averiguando o porquê disso, e logo todos estarão funcionais – assim esperamos :D .

E para a galera do WordPress.com, uma boa notícia: o syntaxhighlighter está disponível lá também! Aliás, foi graças a um blogger de lá, o Flavio Granero, que utiliza esse recurso nativo do WordPress.com, que descobri o plugin – valeu, Flavio!

Para fechar, confira alguns exemplos, usando linguagens diversas. Espero que esse plugin lhes seja útil, e até a próxima!

<?php
// ** MySQL settings ** //
define('DB_NAME', 'wordpress');    // The name of the database
define('DB_USER', 'root');     // Your MySQL username
define('DB_PASSWORD', ''); // ...and password
define('DB_HOST', 'localhost');    // 99% chance you won't need to change this value
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
var WPAjax = Class.create();
Object.extend(WPAjax.prototype, Ajax.Request.prototype);
Object.extend(WPAjax.prototype, {
WPComplete: false, // onComplete function
WPError: false, // onWPError function
defaultUrl: '', // We get these from WPAjaxL10n
permText: '',
strangeText: '',
whoaText: '',

8 ideias sobre “Publique códigos em seus posts com o SyntaxHighlighter

  1. Olha, eu utilizo outro plugin para escrever códigos, mas este é bem melhor porque existem opções de copiar, visualizar, imprimir e fazer download. O problema é que ele dá um erro fatal quando o ativo em meu blog.

    O que pode ser?

  2. Putz, vocês além de excelentes blogueiros são também leitores de mente? Estava atrás disso fazia muito tempo. O post não poderia ter chegado em melhor hora. Aliás, parabéns pelo blog. O novo layout ficou muito bom mesmo.

  3. Olá amigo, como faço pra usar isso no wordpress.com?
    eu tenho um arquivo javascript que criei com um programa chamado “Sothink DHTML Menu Suite 9.1 Build 90218″, ele cria menus pra websites…eu queria utilizar menus de links em posts do meu blog no wordpress.com mas não encontro essa localidade “/wp-content/plugins/” referida no seu post…isso não é só no wordpress.org?
    Grato.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>