Estrutura

Google SyntaxHighlighter: estilize código sem plugins no WordPress

Anúncios Google

Se você tem um blog técnico, provavelmente publica trechos de códigos em linguagens que precisam de estilização adequada (como PHP, Javascript, XML, CSS, etc). E se o blog é criado com WordPress, já deve estar usando algum plugin estilo “Syntax Highlighter” (destaque de sintaxe). Há vários disponíveis.

Mas se pudermos fazer isso e eliminar mais um plugin, melhor ainda. Comecei a fuçar por aí um jeito até que descobri como modificar o Google Syntax Highlighter e carregá-lo direto dentro dos posts. É bem simples e mesmo quem não tem muita intimidade com modificações vai conseguir.

Vou usar como base a versão “antiga” do projeto, que continua funcionando bem. Ela tem algumas peculiaridades como o uso de um arquivo em Flash, que foi eliminado no nosso método.

Como Fazer

Baixe o arquivo compactado na página do projeto. Descompacte-o e encontrará três pastas: Scripts, Styles e Uncompressed.

Na pasta Styles, abra o arquivo de estilos (SyntaxHighlighter.css), copie tudo e cole no final do arquivo style.css do seu template – ou onde os estilos do seu blog são colocados, já que alguns tem caixas no painel do WordPress para tal, especialmente templates premium.

Abra a pasta Scripts. Lá estão os Brushs, ou identificadores de cada tipo de código nas suas páginas e como serão estilizados. Alguns sites e blogs usarão todos, outros só alguns. Por exemplo, aqui no Tutoriart provavelmente só usaria XML/HTML, CSS, Javascript, PHP, e muito talvez Sql.

Essa é a lista de linguagens suportadas.

Abra os “Brushes” que pretende usar, copie todo o código e cole no final do arquivo shCore.js, que está na mesma pasta dos Brushes. Esse é o arquivo principal e o único que vamos usar.

Copie o arquivo shCore.js que modificou para a pasta do seu template (normalmente eu coloco dentro de uma pasta chamada “js”). Chame-o no footer do seu tema com o seguinte código:

<?php if( is_singular() ){ ?>
<script language="javascript" src="url-do-script-shCore.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php } ?>

Mude o src para o endereço em que está hospedado o script que você modificou.

A partir de agora, nos códigos que quiser estilizar, aplique um “name” e “brush” ao bloco predefinido (aquele que usa a tag pre). Por exemplo, para publicar um trecho de código em PHP, sem a estilização, você usaria:

<pre>
aqui o código
</pre>

A partir de então, use:

<pre name="code" class="php">
aqui o código
</pre>

Para estilizar outros códigos, troque o brush, veja na lista de linguagens suportadas (link mais acima).

Ah, preciso de outro estilo…

Se não incluiu um estilo ao shCore e agora precisa dele, não se desespere: é só abrir o brush desejado e como antes, colar no seu shCore personalizado.

É mais ou menos assim que vai ficar o código estilizado. Repare que ele tem links para impressão do código ou vê-lo “limpo” (view plain):

syntaxhighlighter
Aparência de código estilizado pelo SyntaxHighlighter
syntaxhightligher popup
Popup com o código “limpo”
Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Write A Comment

Pin