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.
23/03/2007 at 9:38
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
23/03/2007 at 10:28
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
23/03/2007 at 10:37
Bacana! Já pensou em usar o Geshi? http://dev.wp-plugins.org/wiki/GeshiSyntaxColorer
23/03/2007 at 11:42
Eu uso o Geshi quando vou postar códigos.
23/03/2007 at 14:21
Dica muito boa, ja estou usando: http://insidewebdev.blogspot.com/ =]
[]'s
23/03/2007 at 18:04
Gostei Elcio, diferente do geshi, este mantém o código fonte limpo.
23/03/2007 at 18:39
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]
23/03/2007 at 18:39
Ahá! Funciona!
23/03/2007 at 19:43
Updated Google Code Prettify Bookmarklet…
My poor blogless friend Henri has made some small updates to the original Google Code Prettify JavaScript Bookmarket.
……
23/03/2007 at 20:21
Elcio sempre inventando coisas úteis =]
Legal isso dos comentarios
[]'s
24/03/2007 at 9:27
Olha só, vou usar o Geshi…
Talvez modifica-lo não sei… ainda gostaria de um igual o PASTElog.
Valeu, abraços
24/03/2007 at 10:00
[…] 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. […]
24/03/2007 at 10:50
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
25/03/2007 at 13:48
Muito boa a dica, funciona mesmo! Valeu a contribuição, nesse blog eu aprendo bastante!…
27/03/2007 at 13:15
É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!
28/03/2007 at 8:09
[…] 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. […]
01/05/2007 at 12:30
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! =)
27/11/2007 at 18:47
Como faço para digitar um texto como se fosse uma linguagem de programação e o broswer não como foi feito acima.
03/12/2008 at 22:50
testando…
def x(i,j):
x(j,i)