Renovación y limpieza del blog - Nuevo coloreado de sintaxis

Al pasar a un tema de Blogger más moderno, perdí el coloreado de sintaxis provisto por el plugin Syntax Highlighter de Alex Gorbatchev, proyecto que sigue vivo al día de hoy pero por alguna razón que no logré dilucidar, no funciona con los nuevos temas dinámicos de Blogger.

Investigando un poco, me topé con Highlight JS, y me gustó su simpleza y versatilidad. No tiene números de línea, pero como su creador explica, no son imprescindibles y realmente se ve mucho mejor.

Para instalar Highlight JS en un blog de Blogger, se requieren 3 simples pasos:

  1. Ir a Tema-Editar HTML y agregar links al CSS y JS de HighlightJS dentro de <head>. Por ejemplo, usando los de CDNJS para la versión 9.10:
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/tomorrow-night.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
    Yo estoy usando un estilo (Tomorrow Night) que no es el estándar; hay muchos más disponibles en CDNJS.
  2. Agregar, dentro del <body> del template, una llamada para aplicar el coloreado:
    <script language='javascript'>
       hljs.initHighlightingOnLoad();
    </script>
  3. El plugin de Gorbatchev formateaba usando sólo el tag <pre>. HighlighJS usa <code> dentro de <pre>:
    <pre>
    <code>
    //Tu código acá
    </code>
    </pre>
    El lenguaje es reconocido automáticamente por HighlightJS. Pero como eso no es 100% exacto, a veces es necesario especificar el lenguaje. Eso se puede hacer usando el atributo class del tag <code>. La lista de lenguajes está aquí. Por otro lado, HighlightJS trae los lenguajes más comunes por defecto, pero soporta muchos más si se agregan manualmente. Además, es posible agregar lenguajes y estilos: véase la documentación.

Comments

Popular posts from this blog

VB.NET: Raise base class events from a derived class

Apache Kafka - I - High level architecture and concepts

Upgrading Lodash from 3.x to 4.x