Lo que he aprendido: sintaxis resaltada en Jekyll con Rouge

Creando la web del cursito de LaTeX me di cuenta de que necesitaba colorear el código de alguna manera para que fuera más fácil de leer. Entonces leí que GitHub Pages se había pasado a Rouge para el resaltado de sintaxis y decidí investigar al respecto. Estuve probando varias maneras que no me iban bien hasta que encontré esta página, que simplemente exporta un CSS que define los estilos y colores para el código.

Os cuento lo que he hecho. El proceso tiene dos partes: etiquetar el código y añadir la plantilla.

Etiquetar el código

Para que nos pinte en colorines el código podemos usar Liquid, es decir, rodeamos el código que queramos colorear con estas etiquetas:

{% highlight LENGUAJE  %}

CÓDIGO

{% endhighlight %}

Si estamos escribiendo en Markdown podemos hacer directamente:

```LENGUAJE

CÓDIGO

```

Para el caso del Curso de LaTeX he utilizado la primera opción ya que estaba trabajando directamente en HTML. También he probado la versión Markdown y va bien.

Crear la plantilla

Para crear nuestro CSS necesitamos instalar Rouge, que es una gema de Ruby:

gem install rouge

Ahora tenemos el comando rougify que es elque utilizaremos para exportar el CSS, concretamente con rougify style. Si vamos a su ayuda veremos los estilos disponibles:

ondiz@slimbook101:~/Documentos/cursoLatex$ rougify --help style
usage: rougify style [] []

Print CSS styles for the given theme.  Extra options are
passed to the theme.  Theme defaults to thankful_eyes.

options:
--scope (default: .highlight) a css selector to scope by

available themes:
base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized, base16.solarized.dark, colorful, github, gruvbox, gruvbox.light, molokai, monokai, monokai.sublime, thankful_eyes, tulip

Elegimos uno y lo guardamos, yo he elegido el Solarized porque es supercuco y pega con el estilo de la web:

rougify style base16.solarized > rouge.css

Ahora nos queda conectar este CSS con el HTML. Para ello, vamos a _layouts/default.html y ponemos la ruta al CSS, en mi caso:

    <link rel="stylesheet" href="{{ site.github.url }}/css/rouge.css">

Y ya está aquí podéis ver el resultado.

Sobre _config.yml

Pone por ahí que tenemos que añadir algo de este pelo al archivo _config.yml:

markdown: kramdown

kramdown:
input: GFM
syntax_highlighter: rouge

He estado haciendo pruebas y para el caso de exportar el CSS no hace falta, supongo que para las otras maneras de conseguir el resaltado es necesario, pero no en este caso.


He creado esta página de ejemplo para aprender, en el repo se puede ver todo lo que he contado aquí.

Espero que os resulte útil 🙂

Kaleidoscope Of Colours por Mrs Enil vía Attribution Engine. Licencia CC BY-NC-ND.

Todo lo que he escrito sobre Jekyll está recopilado en esta entrada

Anuncios

3 pensamientos en “Lo que he aprendido: sintaxis resaltada en Jekyll con Rouge

  1. Pingback: Compilación: GitHub Pages y Jekyll | Onda Hostil

  2. Pingback: Lo que he aprendido: ecuaciones en la web con LaTeX y Mathjax | Onda Hostil

  3. Pingback: En qué ando: primera quincena de febrero | Onda Hostil

¡Opina sin miedo! (Puedes usar Markdown)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s