Siempre es de agradecer que el código fuente que se muestre en una página este coloreado según la sintaxis del lenguaje del código.
Para implementar esto en este mismo blog, estubimos barajando principalmente dos opciones: “Highlight.js” y “Code prettifier” de google; ya que ambos detectan el lenguaje de forma automática.
El primero, trabaja directamente sobre cualquier <pre><code> sin necesidad de añadir ninguna class a la etiqueta, en cambio, el de google requería añadir la class “prettyprint”, así que empezamos por probar el primero.
Para incluirlo, no hizo falta ni descargarlo. Solo tubimos que añadir en el head lo siguiente:
<script src="https://yandex.st/highlightjs/5.16/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/5.16/styles/default.min.css">
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>El resultado NO fué satisfactorio. Colorear, coloreaba; pero juntaba todo el código en una misma línea.
Le tocaba el turno al script de google.
Este si que hubo que descargarlo (almenos no encontré la opción para utilizar los servidores de google), y para añadirlo sin tener que reemplazar en base de datos todos los <code> por <code class=”prettyprint”>, lo hicimos de la siguiente forma:
<script src="/wp-content/prettify/prettify.js"></script>
<link rel="stylesheet" href="/wp-content/prettify/prettify.css">
<script>
jQuery(document).ready(function() {
jQuery('code').addClass("prettyprint");
prettyPrint();
});
</script>Con esto como podéis ver el resultado SI és el que esperábamos.
El de google funciona mal con IE 6, y este navegador se sigue usando. Por otro lado cuando copias el codigo, creo que con cualquier IE, no se copian los espacios, y esto es fundamental, y como siempre en Firefox funciona bien.
No puedo encontrar un script que me coloree el codigo y tenga el mismo efecto al copiarlo con todos los navedadores que si no le pongo ningun script para colorear.
Vaya… como siempre el IE 6, dando problemas…
Pues si, lamentablemente aun se sigue utilizando, pero yo soy más partidario de que las cosas de este estilo, como no es algo básico para un usuario, lo deshabilites cuando detectes que el navegador es IE 6, y que recomiendes actualizarse.
Siento no poder darte una solución mejor, pero creo que es un ‘walkarround’ a tener en cuenta.
No puedo hacerlo! que frustración!
Me da un error. Lo estoy poniendo dentro del , no sé que hago mal. Le cambie la versión porque actualmente va por la 6.1. Hablo del highlight.js
este es el error que me da: http://i333.photobucket.com/albums/m399/Link02/errorblog.png
Eso parece un error que da blogger al guardar…
Tendríamos que ver que estas poniendo y donde para saber por donde está el fallo.
De todas formas recomendamos el prettify de google, que es el que puedes ver aquí implementado.
Saludos.
Para poner el prettify, bastaría con pegar el segundo bloque de código que pones, inmediatamente una línea después de la apertura de la etiqueta ?? o tendría que modificarle algo?
He intentado copiar el código de prettify y ponerlo dentro del head, pero me da otro error. Tengo otro script que es para ver código LaTeX por si eso tiene que ver…
Me da la sensación de que lo estas haciendo todo bien, pero hay algo que se escapa…
Puedes inspeccionar el código fuente de esta pagina para que veas como lo hemos insertado nosotros e intentar hacerlo igual pero cambiando las rutas a la css y js.
Siento llegar con unos años de retraso pero he llegado hasta aqui porque tenía la necesidad de implementar esta funcionalidad y me ha sido de mucha utilidad este artículo. Muchas gracias 🙂
En cuanto a que a la opción de llamar a las librerías alojadas en el servidor de Google, sí es posible en la dirección: http://google-code-prettify.googlecode.com/svn/trunk/js-modules/
Además tenemos ejemplos de carga de diferentes hojas de estilo en: http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html
Podéis ver un ejemplo funcionando y aplicado a mi blog en: http://jmacuna73.blogspot.com/2015/01/gadget-para-aumentar-tu-numero-de.html
Un saludo!!
Perfecto!
Gracias por tus aportaciones!
Perdón, puse mal la url del artículo.
La correcta es:
Resalta el código fuente de tu web con Google Code Prettify