Publicado por: 10

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.

10 Comentarios

  1. federico

    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.

  2. Jordi Sánchez Autor del artículo

    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.

    1. Administrador Microteching Autor del artículo

      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.

      1. link01

        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?

      2. link01

        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…

      3. Administrador Microteching Autor del artículo

        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.

  3. Chema

    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!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.