Como resaltar código (syntax highlight) con GoHugo en tu blog

Estos días estuve repasando qué herramientas existen para resaltar código fuente en mi blog, y me encontré que el propio Hugo ya trae disponible esta funcionalidad. Te lo explico.

Aunque puedes añadir bloques de código sin resaltar el color del código (syntax highlight) o puedes enlazar un fichero de Github, restaltar los bloques de código no sólo mejora la legibilidad sino que también lo hace más atractivo visualmente.

¿Qué es GoHugo?

GoHugo es un generador de sitios estáticos escrito en Go. Destaca principalmente por su velocidad y facilidad de uso, lo que lo hace perfecto para las personas que buscamos una solución eficiente y rápida para desplegar contenido en la web. El contenido se gestiona en formato Markdown, que junto con otros archivos de configuración, se transforma en un sitio web completo y funcional.

Esta herramienta la comencé a utilizar hace unos meses en algunos de mis side-projects, y me ha ayudado a simplificar enormemente la gestión de mi blog (entre otros).

¿Cómo añado syntax highlight a mi post?

Hugo integra el resaltado de código (o syntax highlight) de forma nativa, lo que significa que no necesitas plugins ni librerías adicionales.

Cuando añades código en una página con formato markdown, puedes añadir un bloque de código de la siguiente forma:

Usa las comillas triples ```lang ... ``` seguido 
del lenguaje que quieres restaltar para que funcione.

Por defecto, hugo añadirá los estilos en línea en el propio elemento HTML:

<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<code class="language-markdown" data-lang="markdown">
  ...

Esto se puede modificar para que genere un fichero CSS que tendrás que añadir a tu plantilla, modificando markup.highlight.noClasses=false en la configuración de tu sitio estático.

Puedes leer la documentación completa para configurarlo aquí.