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.

19 comments on “Google Code Prettify.

  1. lucas disse:

    testando…


    def x(i,j):
    x(j,i)

  2. rafaelnink disse:

    Como faço para digitar um texto como se fosse uma linguagem de programação e o broswer não como foi feito acima.

  3. Diogo Dourado disse:

    Achei um mais interessante que esse, pelo menos na opcao JUST TO IT! 😉

    ate postei algo no meu blog.. da uma lida, as vezes vale a pena pro pessoal aqui:
    http://dourado.net/2007/05/01/exibindo-codigos-no-wordpress/

    valeu.. ate mais! =)

  4. Rangel disse:

    É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!

  5. Adriano disse:

    Muito boa a dica, funciona mesmo! Valeu a contribuição, nesse blog eu aprendo bastante!… 🙂

  6. silici0 disse:

    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

  7. silici0 disse:

    Olha só, vou usar o Geshi…

    Talvez modifica-lo não sei… ainda gostaria de um igual o PASTElog.

    Valeu, abraços

  8. Guilherme disse:

    Elcio sempre inventando coisas úteis =]
    Legal isso dos comentarios

    []’s

  9. Pingback: PrestonLee.com
  10. Elcio disse:

    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]

  11. Erick Souza disse:

    Gostei Elcio, diferente do geshi, este mantém o código fonte limpo.

  12. Eu uso o Geshi quando vou postar códigos.

  13. silici0 disse:

    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

  14. Matheus disse:

    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 uma resposta

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