Estrutura

Google SyntaxHighlighter: estilize código sem plugins no WordPress

Google+ Pinterest LinkedIn Tumblr
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”

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.

Deixe um Comentário

Pin