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.
- 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='ruta_hacia_el_script/prettify.css' rel='stylesheet' type='text/css'/> <script src='ruta_hacia_el_script/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.
ver themes
En Ribosomatic nos muestran una forma de evitar tener que colocar la clase prettyprint cada vez que agreguemos un código e incluso, evitar que se ejecute la función prettyPrint() si no hay etiqueta pre o code, todo esto de manera automatica con jquery.
Clic aquà para mostrar u ocultar la lista
// agregar la hoja de estilos
<link type="text/css" rel="stylesheet" href="prettify/prettify.css" />
<script type="text/javascript">
$(document).ready(function() {
// agrega clase prettyprint a todos los bloques <pre> (tambien podemos agregar <code>)
var prettify = false;
$("pre").each(function() {
$(this).addClass('prettyprint');
prettify = true;
});
// si se encontro bloques de código se llama la función prettyPrint
if ( prettify ) {
$.getScript("prettify/prettify.js", function() { prettyPrint() });
}
});
</script>
Código de ejemplo:
<html>
<head>
<title>Code Prettifier</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='ruta/prettify.css' rel='stylesheet' type='text/css'/>
<script src='ruta/prettify.js' type='text/javascript' ></script>
</head>
<body onload="prettyPrint()">
<h1>Bash</h1>
<pre class="prettyprint">
#!/bin/bash
# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
local a=1
local b=1
while true ; do
echo $a
local tmp=$a
a=$(( $a + $b ))
b=$tmp
done
}
</pre>
</body>
</html>
no funciona pofff
ResponderEliminarAl parecer "ahora" no funciona cargando el script directamente desde google code, ya iremos a saber porqué ..
ResponderEliminarEl zip con los codes de descarga funciona perfectamente, pruebalo en diferentes navegadores. Actualice el post con un ejemplo corto, funciona perfectamente.
saludos!