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
testando…
def x(i,j):
x(j,i)
Como faço para digitar um texto como se fosse uma linguagem de programação e o broswer não como foi feito acima.
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! =)
[...] 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. [...]
É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!
Muito boa a dica, funciona mesmo! Valeu a contribuição, nesse blog eu aprendo bastante!…
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
[...] 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. [...]
Olha só, vou usar o Geshi…
Talvez modifica-lo não sei… ainda gostaria de um igual o PASTElog.
Valeu, abraços
Elcio sempre inventando coisas úteis =]
Legal isso dos comentarios
[]‘s
Updated Google Code Prettify Bookmarklet…
My poor blogless friend Henri has made some small updates to the original Google Code Prettify JavaScript Bookmarket.
……
Ahá! Funciona!
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]
Gostei Elcio, diferente do geshi, este mantém o código fonte limpo.
Dica muito boa, ja estou usando: http://insidewebdev.blogspot.com/ =]
[]‘s
Eu uso o Geshi quando vou postar códigos.
Bacana! Já pensou em usar o Geshi? http://dev.wp-plugins.org/wiki/GeshiSyntaxColorer
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
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