Google Code Prettify.

Agora este blog tem syntax highlight para os trechos de código que eu escrevo, por exemplo:

function Pessoa(nome,idade,email){
// Para criar as propriedades da classe usamos a palavra-chave this
this.nome=nome
this.idade=idade
this.email=email
// Não existe, em javascript, o conceito de método. Um método é uma
// propriedade como outra qualquer, cujo valor é uma função e,
// portanto, é executável.
this.digaOi=function(){
alert("Oi, eu sou "+this.nome+"!")
}
}

Levei dez minutos para fazer isso. Baixei e instalei a Google Code Prettify e escrevi um plugin do WordPress para adicionar a classe prettyprint a todas as minhas tags <code> e estava feito.

Instruções detalhadas:

Primeiro baixe esses dois arquivos e coloque-os em seu site. Pode ser no diretório raiz. Em seguida inclua no head de suas páginas:


<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Você pode alterar o prettify.css para que fique com as cores que você desejar.

O passo seguinte é colocar onload="prettyPrint()" na tag body.

Agora é só substituir suas tags <pre> e <code> por <pre class="prettyprint"> e <code class="prettyprint">. Pronto, está funcionando.

WordPress

No WordPress você pode alterar o head de sua página e incluir o onload no body no editor de templates, editando o arquivo Header. Para incluir a classe em todas as suas tags code pode copiar o plugin abaixo:


<?php
/*
Plugin Name: Prettify
Version: 1.0
Plugin URI: http://blog.elcio.com.br/google-code-prettify/
Description: Prepares your code snippets to <a href="http://code.google.com/p/google-code-prettify/">Google Code Prettify</a>, adding class="prettyprint" to them.
Author: Elcio Ferreira
Author URI: http://blog.elcio.com.br
*/
function prettify($text) {
return str_replace('<code>','<code class="prettyprint">',$text);
}
add_filter('the_content', 'prettify');
add_filter('the_excerpt', 'prettify');
add_filter('comment_text', 'prettify');
?>

Você pode baixar esse plugin aqui.

Publicado por

Elcio

Elcio é sócio fundador da Visie Padrões Web. Pioneiro no uso e divulgação dos padrões do W3C no Brasil, Elcio já treinou equipes de dezenas de empresas como Globo.com, Terra, Petrobras, iG e Locaweb. Além disso, tem dirigido as equipes da Visie no desenvolvimento de projetos web para marcas como Brastemp, Itaú Unibanco, Johnson & Johnson e Rede Globo.

19 comentários em “Google Code Prettify.”

  1. Élcio,

    Eu dei uma mexida no seu plugin (espero que não se importe), agora ta inserindo automaticamente as tags de link css e script no Template.

    Se você (ou outra pessoa ) quiser dar uma olhada, ele está aqui aqui.

    Só não consegui fazer com que o onload fosse adicionado automaticamente também (mas to tentando), aviso se tiver qualquer progresso.

    Se tiver alguma coisa errada em relação a direitos autorais você me avisa que eu repreencho a seu gosto já que o plugin é seu.

    Abs!

  2. Nossa, depois que eu instalei o Geshi todo meu blog perdeu as tag de HTML de e virando uma bagunça inimaginavel ;/
    A idéia é legal do Geshi do suporte PHP, abrindo href para php.net para as funçoes, porém eu tive esse problema.

    abraços

  3. Pingback: PrestonLee.com
  4. Será que funciona dentro dos comentários também? Deve funcionar, no plugin do wordpress eu apliquei a classe também nos comentários. Vejamos:


    import urllib
    t=urllib.urlopen("http://www.google.com.br/").read()
    print t.split("btnI")[1].split('"')[1]

  5. Onde posso achar maneira de criar um plugin para WP ? Estou interessado em criar um plugin para MarkUP de codes para sairem marcados, coloridos de acordo com a linguagem de programação…

    Igual o PasteLog.

    Se alguem souber também de um pronto, so deixar comments no meu site ou aqui.. No final do dia veio dar uma checada.

    Abraços

  6. assim que li esse post pelo “feed”, pensei nisso: será q funciona no IE, no FF e Opera ??

    entãoo… é importante ressaltar que no FF e no Opera funcionou…. mas no IE7, além de não funcionar, aparece uma mensagem perguntando se deseja interromper o script, pq está deixando o funcionamento do browser lento… como se tivesse entrado em loop infinito.

    só essa ressalva

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *