sábado, 7 de marzo de 2015

Trabajar con Markdown en GitHub

Lo habitual es subir a github.com archivos de código (texto plano). En esos casos, cuando accedemos a través de la interfaz web a esos archivos subidos, el sistema web nos muestra el contenido de forma similar a:

 

 

Es exactamente el archivo que tenemos en la copia del repositorio que almacenamos (en local) en nuestra máquina.

 

Sin embargo, hay muchas ocasiones en las que nos conviene presentar la información de una forma más completa y más cuidada, con formatos de letra, datos tabulados, incluyendo enlaces e imágenes.

 

En nuestro repositorio podemos subir archivos de gráficos (PNG o JPG, p.ej.) y archivos Markdown (extensión .md) que github.com nos mostrará aplicando los formatos que establezcamos.

 

El lenguaje Markdown

 

Markdown es un lenguaje de marcado muy sencillo y ligero. Básicamente, lo que hace es convertir el texto marcado en documentos XHTML bien formados. Este lenguaje se basa en el uso de ciertos caracteres para incluir y usar ciertos tipos de formatos.

 

Por ejemplo, anteponiendo el caracter # a una línea de texto, convertiremos esa línea en una cabecera de primer nivel. Si anteponemos ## estaremos indicando que ese texto lo queremos como cabecera de segundo nivel:

 # Cabecera de primer nivel

 ## Cabecera de segundo nivel

 

Si una palabra o texto queda encerrada entre dos caracteres * estaremos poniéndola en cursiva, mientras que si la encerramos entre doble ** estaremos poniéndola en negrita:

  *cursiva*

 **negrita**

 

También podemos enlazar otras páginas o archivos, de forma que cuando github.com nos muestre el archivo .md formateado, veamos y podamos pinchar sobre un enlace (como estamos acostumbrados) para ir a otra página. La sintaxis para incluir un enlace es:

 texto fuera del [enlace](http://www.dominio.com/carpeta/archivo.html)

 

De la misma forma, github.com nos puede mostrar imágenes en el texto formateado, si las incluimos en el archivo .md con el formato:

 ![img](http://www.dominio.com/carpeta/archivo.png)

 

Existen muchos más formatos que podemos usar en un archivo .md pero con los vistos tendremos más que suficiente para crear documentos bien presentados para entregar los trabajos y prácticas. Al final de este mini-tutorial incluimos una serie de enlaces donde aprender todos los detalles del lenguaje, extensiones, etc.

 

Un ejemplo de uso

 

Vamos a hacer un ejemplo completo suponiendo que para la entrega de nuestra práctica-1 queremos entregar un archivo .md en el que mostremos los resultados con formatos de texto bien presentados e incluyendo una tabla de datos y una imagen.

 

Para ello, vamos a subir a la carpeta “practica1” de nuestro repositorio de la asignatura un archivo de texto plano con extensión .md y un archivo de imagen con extensión .PNG. El proceso a seguir es el mismo que vimos en el primer tutorial sobre git+github

 

Una vez que los tengamos subidos a nuestro repositorio remoto en github.com:

 

podemos obtener el enlace a la imagen (opción “Copiar enlace” de nuestro navegador):

 

 

Ahora estamos en disposición de editar el archivo .md que tenemos en nuestro repositorio para especificar los formatos, incluir un enlace, una imagen y una tabla.

 

En la primera parte de nuestro archivo Markdown incluiremos una cabecera de primer nivel (línea 1), texto plano sin formato (línea 4), una cabecera de segundo nivel (línea 6), una palabra en cursiva (línea 8), otra palabra en negrita (línea 10), y según la sintaxis que hemos visto antes, un enlace a Google (línea 12) e incluiremos una imagen que hemos subido al repositorio y de la que hemos obtenido la URL (línea 16):

 


Esta primera parte del archivo “fich.md” se nos mostrará en github.com como sigue
:

 

 

En la segunda parte de dicho archivo, vamos a incluir dos tablas (formato un tanto especial usando guiones, | y dos puntos) y una cabecera de tercer nivel (formato ###):

 

 

Esta segunda parte del archivo “fich.md” se nos mostrará en github.com como sigue:

 

 

 

Este lenguaje tiene una gran funcionalidad, siendo sumamente flexible, sencillo y ligero. Para conocer más detalles acerca del mismo, mostramos en la siguiente sección un buen número de páginas con tutoriales y páginas de ayuda.

Referencias

 

http://en.wikipedia.org/wiki/Markdown

http://es.wikipedia.org/wiki/Markdown

http://daringfireball.net/projects/markdown/

 

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

http://markdowntutorial.com/lesson/1/

https://guides.github.com/features/mastering-markdown/

https://help.github.com/articles/markdown-basics/

https://confluence.atlassian.com/display/STASH/Markdown+syntax+guide

 

http://xlson.com/2010/11/09/getting-started-with-github-pages.html

https://pages.github.com

 

http://www.tablesgenerator.com/markdown_tables

 

 

2 comentarios: