Previsualizar Markdown en Sublime Text como HTML

[ 2 ] Comentarios
Compartir
Propuesta de icono markdown de http://cargocollective.com/inami/Markdown

A menudo, cuando tomamos notas o escribimos documentación, lo que empieza siendo un breve apunte o un recordatorio se convierte pronto en algo extenso que tenemos que versionar (con GIT por ejemplo), que consultamos con frecuencia, o que tenemos que compartir con otro en un formato de documento más legible como .pdf o .html. En este artículo vamos a ver como previsualizar documentos Markdown o Github en HTML utilizando Sublime Text 2 / 3.

Escribir en Word o programas similares tiene muchos inconvenientes, porque para editarlo necesitas instalar herramientas especificas que pueden ser muy pesadas o que tardan en abrirse más de lo que nos apetece para tomar unas pocas notas. Para evitar esto, existen lenguajes como Markdown, que nos permiten, si seguimos unas pocas reglas, construir documentos muy simples y con cualquier editor de texto (bloc de notas, Notepad++, Sublime text…) pero que pueden ser exportados con muchísima facilidad a distintos formatos y con estilos muy atractivos, además de ser perfectamente compatibles con herramientas de control de versiones.

En el caso que nos ocupa, y partiendo de la base de que conocemos Markdown (podeis aprenderlo en 10 minutos jugando con este tutorial) vamos a ver como instalar y utilizar el complemento de Sublime Text 2|3 que nos permite visualizar nuestros documentos Markdown en HTML (en el navegador).

Paso 1 – Instalación del Package Control

Con Sublime Text instalado, necesitamos instalar un complemento. La mejor forma de instalarlo es utilizando el Control de paquetes (Package Control)… así que lo primero que vamos a instalar es este complemento.

Las instrucciones oficiales están aquí: https://sublime.wbond.net/installation#st2

A modo de resumen, basta con abrir la consola en Sublime Text desde el menú View > Show Console y ejecutar el código de Python que os dicen en la documentación anterior. Después, reiniciamos Sublime Text.

Paso 2 – Instalación del complemento Sublimetext-markdown-preview

Una vez disponemos del Package Control, podemos instalar el complemento que podeis encontrar aquí: https://github.com/revolunet/sublimetext-markdown-preview

La instalación consiste en lo siguiente: abre Sublime Text y pulsa Ctrl + Shift + P (o cmd + shift + P si estas en MAC OSX) y en el desplegable que aparecerá elige “Package Control: Install Package”, busca después “Markdown Preview” e instalalo.

Finalmente, cuando la isntalación haya concluido, para evitar problemas, reinicia de nuevo Sublime Text.

Paso 3 – Utilizar el complemento

Abre en Sublime Text un texto escrito con sintaxis Markdown, por ejemplo este:

[code lang=”csharp”]
# Prueba de previsualizacion
* Me encanta Markdown
* Me encanta Sublime Text
> No te olvides de comentar en [findemor.porexpertos.es](http://findemor.porexpertos.es/previsualizar-markdown-en-sublime-text-como-html)!
[/code]

Ahora pulsa Ctrl + Shift + P (o cmd + shift + P si estas en MAC OSX) y elige “Markdown Preview: Preview in Browser” para visualizar el resultado en el navegador.

Algunas notas adicionales

Nota 1 – Si guardáis el fichero en Sublime Text y actualizáis el navegador, se refresca la previsualización, no hace falta buscar la opción en el menú cada vez.

Nota 2 – Observa que hay varias opciones interesantes: Preview in Browser, Export HTML, Copy to Clipboard y Open Cheat sheet… echales un ojo! pueden resultarte útiles.

Nota 3 – En el enlace a GitHub anterior del componente, puedes ver más opciones, como establecer teclas por defecto para previsualizar, y muchas otras cosas. Gracias a los desarrolladores!

Nota 4 – ¡Gracias a @jrm_10 por darme a conocer Markdown!

Espero que os haya resultado interesante… ¿vosotros también utilizáis sintaxis de marcado para vuestra documentación?

Acerca de findemor

Técnico de Innovación en solusoft.

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/30/d298707731/htdocs/porexpertos.es/wp-includes/class-wp-comment-query.php on line 405

2 Respuestas a Previsualizar Markdown en Sublime Text como HTML

  1. Jorge dice:

    ¡Me encanta! Lo incorporo a mis editores :-p

  2. The github option means to use Github’s online API for parsing the MD file, this can take sometime due to your connection speed. It can open a split window with your MD file on the left and a live HTML preview on the right all in the text editor.

Deja un comentario

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