Google Code Prettify.

By On · 19 Comments · In Sem categoria

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.

Posts Relacionados

Tagged with: • • • •  
Share →
  • lucas

    testando…


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

  • 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.

  • http://dourado.net 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! =)

  • Pingback: Rangel Avulso - » Google Code Prettify WP Plugin Updated

  • http://www.hrangel.com.br 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!

  • http://adriano.ison.com.br/ Adriano

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

  • http://rafaelcunha.com 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

  • Pingback: Silici0 :: My LiFe :: » Geshi > highlighting

  • http://rafaelcunha.com silici0

    Olha só, vou usar o Geshi…

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

    Valeu, abraços

  • http://insidewebdev.blogspot.com/ Guilherme

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

    []‘s

  • Pingback: PrestonLee.com

  • http://elcio.com.br Elcio

    Ahá! Funciona!

  • http://elcio.com.br 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]

  • http://www.ericksouza.com Erick Souza

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

  • http://insidewebdev.blogspot.com/ Guilherme

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

    []‘s

  • http://www.oitobits.net Vinícius Silva

    Eu uso o Geshi quando vou postar códigos.

  • http://waltercruz.com Walter Cruz

    Bacana! Já pensou em usar o Geshi? http://dev.wp-plugins.org/wiki/GeshiSyntaxColorer

  • http://www.rafaelcunha.com 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

  • http://matheuseduardo.com 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