Dec 17, 2011

HTML – Color Syntax Codding using Google Code Prettify

Ya quisiéramos lo que hemos probado  GeShi (Generic Syntax Highlighteren) poder usarlo con Blogger..
¿GeShi en Blogger? si, el inconveniente es que el primero trabaja con PHP y el segundo no permite ejecutarlo, vaya gracia.
Todas las alternativas de las que podemos disponer trabajan con JavaScript, entre ellos, el SyntaxHighlighter (que es uno de los más usados), pero, luego de revisar Google Code Prettify, no tengo quejas.
Características:

- es ligero, no bloquea la página mientras se carga.
- dispone de varios estilos personalizados a través de CSS.
- soporta: bash, C, Java, JavaScript, Perl, Python, SQL, XML, HTML, PHP, entre otros.
- no hay necesidad de especificar el lenguaje para que lo coloree.
- si lo desea puede especificar el lenguaje.
- fácil de instalar.

Podemos ver la demostración o descargar la ultima versión, aplicarlo es muy fácil:
1.- incluimos el archivo prettify.css y prettify.js antes de la etiqueta </head>:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'
type='text/javascript'/>


2.- debemos llamar a la función prettyPrint() para que comience a colorear el código especifico; eso lo podemos hacer de varias formas, en el sitio oficial recomiendan agregarlo al evento onLoad en la etiqueta <body>:
<body onload="prettyPrint()">


3.- para indicarle al Google Code Prettify que código va a colorear, solo metemos el code entre etiquetas pre o code, ejemplo:
<pre class="prettyprint">
// aquí tu code
</pre>
<code class="prettyprint">
// aquí tu code
</code>


cuando la pagina termine de cargar se mostrara nuestro código coloreado.

No comments: