Actualmente me he encontrado en la necesidad de escribir una serie de presentaciones para un proyecto. Siempre he dependido enteramente en Microsoft PowerPoint para realizar las presentaciones de mi carrera o pequeñas presentaciones a cliente con plantillas de las empresas en las que anteriormente trabajaba.

Para separarme de Microsoft he decidido buscar un programa de software libre que me permita realizar mis presentaciones y me he decantado por Marp.

¿Qué es Marp?

Marp es un programa utilizado para generar presentaciones. Lo que diferencia a Marp de otros programas de generación de diapositivas como Microsoft PowerPoint o LibreOffice Impress es que las presentaciones en Marp pueden ser generadas mediante documentos Markdown, lo cual aumenta la velocidad a la hora de generar presentaciones.

Una alternativa a Marp que he usado en otras ocasiones es LaTeX Beamer que he considerado usar, pero, a mi parecer, no contiene el nivel de personalización que si me presenta Marp.

Cómo utilizarlo

Para utilizar Marp deberemos instalar la utilidad marp-cli y generar un documento Markdown. Una vez hecho esto procederemos a ejecutar el comando:

1marp --watch documento.md

De forma que nuestro documento Markdown se transformará en un documento HTML que se irá actualizando según modifiquemos el documento.

Preámbulo

En primer lugar deberemos configurar las opciones iniciales del documento. Una configuración básica¹ sería la que se muestra a continuación:

 1---
 2marp: true
 3paginate: true                         # Shows the page number
 4header: 'Only in death does duty end'
 5footer: 'Slides by [Gabriel Cachadiña](https://gabrielcachadina.com/)'
 6size: 16:9
 7
 8style: |
 9    @import "default";
10    @import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
11
12    :root {
13      font-family: "Work Sans Regular", Arial;
14      --main-color: #040014;
15      --text-color: #121114;
16      --bg-color-alt: #dadada;
17      --mark-background: #98d6ff;
18    }

Donde se muestra:

• marp: Establece el tipo de documento, por lo que deberá aparecer siempre.
• paginate: Utilizado para mostrar el número de la página de la presentación.
• header: Texto del encabezado
• footer: Texto al pie de la diapositiva
• size: Resolución de las diapositivas
• style: Estilo CSS²

Diapositivas

Las diapositivas estarán delimitadas por --- y estas estarán formadas por elementos encontrados comúnmente en Markdown, HTML y $\LaTeX$.

Índices

Marp no soporta índices automáticos (cosa que si hace Beamer), por lo que se tendrá que especificar de forma manual el salto de diapositiva que se quiere realizar.

1---
2# Índice
31. [Section 1](#1 "Section 1")
42. [Section 2](#1 "Section 2")
53. [Section 3](#1 "Section 3")
64. [Section 4](#1 "Section 4")

Niveles

Las diapositivas podrán tener tamaños de letra distintos en función del nivel de header que se decida utilizar. Además de esto se podrá configurar el color de cada tipo de letra dentro de la configuración CSS.

1---
2# Layer 1 Title
3## Layer 2 Title
4### Layer 3 Title
5#### Layer 4 Title
6##### Layer 5 Title
7###### Layer 6 Title

Listas

Las listas podrán estar enumeradas o no y podrán estar ordenadas, es decir, que aparecerán todas al mismo tiempo; o fragmentadas, de forma que aparecerán de uno en uno.

 1---
 2# Bullet Lists
 3- Item 1
 4- Item 2
 5- Item 3
 6- Item 4
 7---
 8# Fragmented Lists
 9* Item 1
10* Item 2
11* Item 3
12* Item 4
13---
14# Ordered Lists
151. Item 1
162. Item 2
173. Item 3
184. Item 4
19---
20# Fragmented Lists
211) Item 1
222) Item 2
233) Item 3
244) Item 4

Código

A la hora de poner código, este podrá tener su sintaxis coloreada mediante la librería highlightjs.

 1---
 2# Code_Blocks
 3Some `golang` code:
 4	```go
 5	package main
 6	
 7	import "fmt"
 8	
 9	func main() {
10	    fmt.Println("hello world")
11	}
12	```

Fórmulas

Usando la nomenclatura $\LaTeX$, marp es capaz de renderizar fórmulas mediante MathJax.

1---
2# Math
3
4An inline formula is $x^2=3$, while a centered one is:
5
6$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx \quad (1)$$

Tablas

Para las cuales recomiendo usar algún plugin de neovim como easytables.

1---
2# Tables
3
4| Tables   |      Are      |  Cool |
5|----------|:-------------:|------:|
6| col 1 is |  left-aligned | $1600 |
7| col 2 is |    centered   |   $12 |
8| col 3 is | right-aligned |    $1 |

Imágenes

Marp es extremadamente extenso en lo que a imágenes se refiere, es por ello que recomiendo encarecidamente apoyarse sobre el manual. A continuación muestro algunas diapositivas con lo que yo he usado y uso normalmente.

 1---
 2### Image insertion
 3
 42 Images together:
 5![width:350px](https://upload.wikimedia.org/wikipedia/commons/6/65/Aurelia-aurita-3-0049.jpg)    ;![height:7cm opacity:.5 blur:2px](https://upload.wikimedia.org/wikipedia/commons/6/65/Aurelia-aurita-3-0049.jpg)
 6
 7---
 8
 9### YouTube Videos
10
11[![video alt text](http://img.youtube.com/vi/jNQXAC9IVRw/0.jpg)](http://www.youtube.com/watch?v=jNQXAC9IVRw?t=35s "resist to click")
12
13---
14
15![bg left:40%](https://upload.wikimedia.org/wikipedia/commons/4/4b/Everest_kalapatthar_crop.jpg)
16
17### Split backgrounds with specified size
18With some more text under the title
19
20<!--
21backgroundImage:
22backgroundColor:
23color:
24-->

Múltiples columnas

Actualmente no hay una forma directa de incluir 2 columnas con texto en Marp, al menos de forma nativa. He encontrado la siguiente forma de hacerlo usando CSS:

 1---
 2# Multiple Text Columns
 3<div class="columns">
 4<div>
 5
 6- Column
 7- Number
 8- 1
 9
10</div>
11<div>
12
13- Column
14- Number
15- 2
16
17</div>
18</div>

Notas del presentador

Si existe la necesidad se pueden añadir notas que son solo visibles al presentador. ³

1---
2# Speaker Notes
3Inside this slide there are some speaker notes.
4<!--
5 Here lie some of the notes of this slide. I need to talk about:
6 - Speaker notes in marp
7 - How Markdown does NOT work in this notes
8 - How this is hidden from the user
9-->

Estilo Markdown

Además de lo anterior mencionado el texto se podrá modificar igual que en un documento de Markdown normal.

1# Other stylistic markdowns for highlighting include
2
3- `...` from `` `...` `` as surrounded backticks
4- *italic* from `*italic*`
5- **bold** from `**bold**`
6- ~~strikethrough~~ from `~~strikethrough~~`
7- > blockquote from `>`
8- [source link](https://www.website.com) from `[source link](http://www.website.com)`
9- Some fancy emojis :shit: from `:shit:` using words surrounded by colons

Compilado

Tras terminar un documento se deberá compilar usando uno de los siguientes comandos

• marp documento.md Si se desea en formato HTML
• marp --pdf documento.md Si se desea en formato PDF, pero se perderán las animaciones.
• marp --pptx documento.md Si se desea en formato PowerPoint, pero no será editable, solo serán una serie de imágenes sobre las que se podrán poner elementos encima.

Conclusión

Marp tiene una pequeña curva de aprendizaje y su uso en lo que respecta a personalización es mucho más lento que el que ofrecen otros programas WYSIWYG, pero si se decide hacer la inversión de tiempo presenta una alternativa muy buena para hacer presentaciones sin distracciones y con el beneficio de que todos los datos permanecen en un formato legible incluso si el programa deja de existir.