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.