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 respostas para “Google Code Prettify.”

  1. Avatar de lucas
    lucas

    testando…


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

  2. Avatar de rafaelnink
    rafaelnink

    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. Avatar de Diogo Dourado

    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. […] Este plugin foi feito baseado no Plugin do Élcio só fiz algumas alterações pra automaticamente gerar o código para as tags css e scripts do gprettify no template do WordPress, espero que alguém possa aproveitar. […]

  5. Avatar de Rangel

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

  6. Avatar de Adriano

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

  7. Avatar de silici0

    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

  8. […] Graças a discução no blog do Elcio no FechaTag sobre Google Code Prettify eu descubri o Geshi, nos comentários soltaram esse plugin para WP, quando eu estava pesando em produzir apartir do PasteLog. […]

  9. Avatar de silici0

    Olha só, vou usar o Geshi…

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

    Valeu, abraços

  10. Avatar de Guilherme

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

    []’s

  11. Updated Google Code Prettify Bookmarklet…

    My poor blogless friend Henri has made some small updates to the original Google Code Prettify JavaScript Bookmarket.

    ……

  12. Avatar de Elcio

    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]

  13. Avatar de Erick Souza

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

  14. Avatar de Guilherme

    Dica muito boa, ja estou usando: http://insidewebdev.blogspot.com/ =]

    []’s

  15. Avatar de Vinícius Silva

    Eu uso o Geshi quando vou postar códigos.

  16. Avatar de silici0

    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

  17. Avatar de Matheus

    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 *