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.
View Comments (16)
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! =)
É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
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
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]