Editores de Markdown: MarkdownPad 2 y Marp (II)

Buenos días | tardes | noches, seguimos con la segunda parte de los editores de markdown.

La primera parte es esta

En esta entrada os enseñare Marp, software para realizar presentaciones con el lenguaje Markdown.

¿Qué es Marp?

Marp, cómo he explicado en la introducción a la entrada, es un software que nos permite realizar presentaciones en PDF o en su extensión por defecto, MD. Esta aplicación es, en el mundo del software, una recién nacida y lleva poco tiempo.

Marp es una herramienta sencilla e intuitiva cómo MarkdownPad 2 y al igual que ella, tiene una vista previa del código que vayamos escribiendo para que podamos ver el resultado final mientras redactamos.

Marp está soportado en Windows, distribuciones Linux y Mac.

Para poder obtener Marp e “instalarlo” tan sólo tenemos que descargarnos el zip, descomprimirlo y hacerle un enlace simbólico al ejecutable (en el caso de las distribuciones Linux)  para poder iniciar la aplicación.

Aprendiendo a usar Marp

Marp es realmente sencillo de utilizar. La sintaxis que utiliza es la misma que Markdown a excepción de la separación de las “diapositivas”, que Marp las separa con tres guiones.

Un ejemplo es el siguiente:

a4

Cómo podemos observar, las “diapositivas” se han separado gracias a los tres guiones definidos entre las dos cabeceras.

Características de Marp

Estilos de vista previa

La principal característica de Marp es que podemos visualizar nuestra presentación de tres formas diferentes:

  • Markdown: este estilo mostrará el resultado de la presentación tal y cómo se vería si subieramos el fichero a Github.
  • 1:1 Slide: con este formato de vista previa podemos observar nuestra presentación tal y cómo se vería si la guardaramos cómo PDF.
  • Slide list: esta vista previa muestra todas las “diapositivas” juntas, es decir, se muestra cómo si fuera una tira de fotomatón.

Emojis

Otra de sus características interesantes es que soporta emojis, si, esas caras de color amarillas que muestran diferentes expresiones faciales.

Los diferentes emojis que podemos insertar se encuentran en este enlace y, aunque no todos están soportados, la mayoría sí lo están.

Imágenes de fondo

Con Marp podemos agregar imágenes de fondo a las “diapositivas” que incluyamos. Tengo que decir que la imagen que definamos de background, sólo se definirá en la “diapositiva” en la que lo definamos.

Un ejemplo sería:

a0

Cómo podemos ver, sólo se insertará en la primera “diapositiva” y no en la segunda ya que no está definida.

Aclarar que esto sólo se verá en el formato PDF y en las vistas previas 1:1 Slide y Slide List. No se verá en la vista previa Markdown ya que no está soportado (al menos yo no he encontrado la forma de hacerlo con la misma sintaxis)

Formulas matemáticas

Marp también permite la inserción de formulas matemáticas en dos formatos (los ejemplos usados son los definidos en su web):

a2

No me meteré mucho en el mundillo de las formulas matemáticas avanzadas ya que no tengo el suficiente nivel para mostraros ejemplos.

Temas

Por defecto y únicos temas desarrollados a día de hoy, Marp cuenta con dos:

Default: el tema por defecto, con el fondo en blanco, colores sencillos y el tipo de letra común. (se puede ver un ejemplo en la imagen del ejemplo anterior)

Gaia: tema alternativo a Default, usa un fondo amarillento, mismos colores asignados a las letras y distinto tipo de letra para hacerla más gruesa (un estilo a bold).

a3

Al cambiar de un tema a otro, nos aparecerá una directiva en la “diapositiva”, esto se aplicará para todas las demás.

En el siguiente apartado hablaremos sobre las directivas de Marp.

Directivas de páginas

Con Marp podemos hacer uso de las directivas de páginas para hacer más atractivas nuestras “diapositivas”. Podemos definir las directivas de páginas escribiendo al principio de la “diapositiva” lo siguiente:

<!-- $<nombre de la directiva>: <valor> -->

Gracias a ellas, podemos:

  • Tamaño y grosor:
    <!-- $width: 12in -->
    <!-- $size: 16:9 -->
  • Insertar los números de páginas:
    <!-- page_number: true -->
  • Invertir los colores del tema (sólo afecta al tema Gaia):
    <!-- template: invert -->
  • Insertar un pie de página (uno por “diapositiva”/página):
    <!-- footer: esto es un pie de página -->
  • Insertar redenrizar para evitar errores al cargar imágenes de alta calidad:
    <!-- prerender: true -->

Para insertar todas las directivas de páginas en un sólo “bloque”:

<!-- 
directiva1: valor1
directiva2: valor2
directiva3: valor3
...
-->

Si queremos que una directiva afecte sólo a una página, le incluimos un asterisco ( * ) delante del nombre de la directiva, ejemplo:

<!-- *$theme: gaia -->

Repositorio oficial

En el caso de que tengáis algún problema, podéis buscarlo o reportarlo en el repositorio oficial de Marp.

Recomendaciones de lectura

Si queréis tener aún más información acerca de Marp, los compañeros de ks7000 te dan mucha más información acerca de este recién nacido software.

 

Espero que os haya gustado, que hayais aprendido un poco más sobre las herramientas disponibles para Markdown y que conozcais ese mundillo que nos ofrece tal lenguaje.

Saludos y nos vemos en la siguiente entrada!

2 comentarios sobre “Editores de Markdown: MarkdownPad 2 y Marp (II)

  1. ¡Muy buen resumen! Es que nosotros nos extendemos demasiado al realizar nuestras entradas, je, je, je 😉; un detallito que investigamos es la lista completa de los emoticones soportados:
    https://github.com/markdown-it/markdown-it-emoji/blob/6a65f5183fe0145219805040988341bf76ade32e/lib/data/full.json (porque es una librería que se complia en Marp, [i]si no estamos equivocados[/i]).

    Y NO MENOS IMPORTANTE la lista completa de los signos y código matemáticos (nosotros que estudiamos ingeniería mecánica en la Universidad de Carabobo “se nos quemaron las pestañas” con las matemáticas): https://khan.github.io/KaTeX/function-support.html

    ¡Gracias, feliz día y feliz exposición!

    Le gusta a 1 persona

Responder

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 )

Google photo

Estás comentando usando tu cuenta de Google. 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 )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .