Previsualizando Posts de Jekyll con Marked

Al final va a ser que el tener un blog no es sino una excusa para cacharrear porque, visto lo visto, aún no le he cogido el ritmo a lo de escribir. En este enésimo retorno por fin he logrado conseguir algo que tenía pendiente desde que di el salto a Jekyll.

Y es que al final uno pasa más tiempo perfilando flujos de trabajo y automatizando cosas que realmente escribiendo. Recientemente, por fin he acabado mi flujo en movilidad para poder postear en el blog desde el iPhone o el iPad gracias al maravilloso cliente de Git llamado Working Copy ¹. Pero eso es harina de otro costal, y espero (y cruzo los dedos) que pronto aparezca otra entrada por aquí acerca del tema.

Pero lo que realmente me ha traído frente el teclado esta vez ha sido el poder conseguir visualizar de una manera más o menos fiel los textos escritos Markdown y Liquid en Marked ², algo que me había traído de cabeza más de una vez y que tras varias intentonas tenía medio aparcado.

No volveré hablar otra vez sobre Markdown, Byword y Marked pues lo hice hace ya un buen tiempo en este mismo blog. Si alguien estuviese interesado en saber más, no tiene pérdida.

Sí que me permitiré volver a hablar un poco sobre Jekyll y no para ahondar sobre sus bondades como excelente generador de páginas web estáticas, si no para hacerlo acerca de su uso de Liquid y de cómo dejarme de CMSs a la WordPress y remangare con Jekyll ha hecho que por el camino haya tenido que aprender Git, me haya tenido que poner las pilas con la Interfaz de Línea de Comandos e incluso haya hecho mis pinitos en Ruby.

La cuestión es que Jekyll utiliza plantillas o etiquetas en Liquid de manera que tareas como enlazar imágenes son mucho más sencillas³, ya que, en vez de tener que enlazar toda la URL de cada imagen que queramos usar, bien en HTML:

 
<img src="http://www.asiertejada.com/assets/img/mi-imagen.png" alt="" width="" height="" border="" align="" />
 

bien en Markdown:

 
![](http://www.asiertejada.com/assets/img/mi-imagen.png)
 

podemos emplear etiquetas de Liquid y tan sólo referenciar el nombre de cada imagen cada vez:

  
![]({{ site.url }}/assets/img/{{ page.images_folder }}/mi-imagen.png)
 

Donde site.url hace referencia a la etiqueta url que hayamos especificado en el archivo de configuración YAML de nuestro blog:

Y page.images.folder a la carpeta donde subimos nuestras imágenes y que especificamos en el Front Matter también en YAML de cada una de nuestras entradas, es decir de cada archivo en Markdown que creamos:

Maravilloso, pero el problema que suponía esto en mi flujo de trabajo era que, a la hora de previsualizar las entradas de mi blog en Marked mientras las escribía en Byword, las etiquetas de Liquid no eran correctamente procesadas por lo que las imágenes no se mostraban más que como una línea de código ⁴.

En mi caso, suelo usar Marked también para enviar una copia en PDF del artículo terminado a mi iPad ⁵ y revisarlo y anotarlo para, en caso necesario, corregirlo antes de publicarlo.

Sabía que el desarrollador de Marked, Brett Terpstra, se habría topado con este problema también y que por tanto, como buen hacker, habría tenido que buscar una solución. Y efectivamente así era. Buceando por su blog encontré la correspondiente entrada Previewing Jekyll posts with Marked ⁶ como no podía ser de otra forma.

En ella Brett explica que, para poder conseguir nuestro objetivo, es necesario preprocesar nuestro archivo en Markdown para transformar así las etiquetas de Liquid antes de ser procesadas por Marked y, para ello, comparte el script en Ruby que emplea para su blog.

Obviamente, el script necesita ser modificado para cada blog en cuestión, en estas cosas cada maestrillo tiene su librillo, pero la idea de Brett era que este ejemplo nos sirva para enterarnos de por dónde iban los tiros.

En mis primeras intentonas no fui capaz de conseguir que el script funcionara y, como tampoco tenía muchas ganas (ni tiempo) para dar mis primeros pasos con Ruby, pues acabé por dejar la tarea en el apartado Algún día de mi gestor de tareas favorito.

Sin embargo, esta Semana Santa, y dado que había decido poner fin mi ausencia en este blog, decidí ponerme manos a la obra una vez más.

Así que, ni corto ni perezoso, fui destripando concienzudamente el script línea por línea mientras que a su vez iba consultando en Dash ⁷ la documentación oficial de Ruby e iba destripando las Expresiones Regulares con la ayuda de esa gran herramienta llamada RegExr.

Y así, mediante prueba y error ⁸, por fin conseguí de una manera más que aceptable la meta que me había propuesto, obteniendo como resultado algo parecido a lo que se puede ver en la figura que sigue a estas líneas. Todo gracias a la preciosidad de script que adjunto al final de esta entrada. Misión cumplida.