Slidev 101: crea presentaciones con Markdown

Como developer advocate, suelo hablar en público para compartir mi experiencia y ayudar a otros desarrolladores a aprender, lo que significa que paso mucho tiempo creando presentaciones. Puede ser un proceso tedioso, sobre todo si consideramos detalles como la paleta de colores, la disposición visual y la narrativa. Después de un tiempo, quise encontrar un método que incorporara una experiencia de desarrollo fluida al proceso.

Por suerte, existe una forma mejor y más programática de crear tus diapositivas: Slidev, el proyecto de código abierto que te permite programar tus presentaciones.

Aplicaciones para crear presentaciones vs. presentaciones programadas

He creado presentaciones con Keynote, Google Slides y Slides.com, y me encontré con algunos desafíos en cada una, como:

• Keynote no es muy portable y requiere que exportes las diapositivas a PDF para compartirlas.

• Google Slides es útil para colaborar en la edición cuando hace falta, y los temas estandarizados para presentaciones de Snyk ayudan a evitar que el trabajo visual se convierta en una pérdida de tiempo. Sin embargo, Google Slides no tiene funciones de animación de texto, que son muy útiles para animar cambios en el código. Otro desafío es que debes estar «en línea» para que Google Slides funcione correctamente, y todos sabemos lo lenta que puede ser la red wifi de una conferencia.

• Slides.com se creó sobre la base del proyecto de código abierto Reveal.js, creado por el talentoso Hakim El Hattab. Me gusta este servicio de presentaciones basado en la web por su simplicidad, pero no permite usar temas y a menudo supero los límites de la versión gratuita (y, a veces, también de la versión de pago).

A partir de lo anterior, algunas ventajas de programar tus presentaciones son:

• Tener acceso a un historial de versiones basado en código.

• La naturaleza de código abierto de GitHub facilita compartir tus diapositivas y colaborar con otras personas.

Programa tus presentaciones con Slidev en GitHub

Antes de profundizar en Slidev, cabe mencionar que programar las diapositivas de una presentación no es una idea nueva. Patrick Debois, también conocido como el padre de DevOps, analizó este concepto en una publicación de su blog sobre distintos conceptos como código. Reveal.js y MDX son dos ejemplos de proyectos que existen desde hace tiempo.

Empecemos por conocer Slidev y sus orígenes. Slidev es un proyecto de código abierto basado en Vue.js y creado por Anthony Fu. Su objetivo es simplificar la creación de diapositivas usando la sintaxis de Markdown como base y ampliando las funciones disponibles para que los usuarios puedan crear sus propios componentes.

Empieza por crear un proyecto de Slidev en una carpeta nueva:

1npm init slidev

Te hará varias preguntas sobre el título de las diapositivas, el nombre de la carpeta y otros detalles. Al terminar, generará la estructura inicial de un proyecto con un ejemplo sencillo de componente y un archivo principal llamado slides.md, que contiene toda la presentación.

La estructura de carpetas y el archivo de la presentación deberían verse más o menos así:

Observa el contenido del archivo slides.md:

• Este archivo Markdown incluye una configuración YAML Frontmatter que te permite personalizar diapositivas específicas o toda la presentación. Está delimitada por los caracteres --- de apertura y cierre.

• Cada título del archivo Markdown usa la notación # Title heading 1 para indicar el título y encabezado principal de la diapositiva. Debajo aparece el contenido.

• Para personalizar aún más los botones y elementos visuales de la diapositiva, se usa código HTML para los elementos DOM <div> y <span>.

Cuando terminemos de hacer cambios en la presentación predeterminada, podemos ejecutar el proyecto de Slidev en modo de recarga en caliente con:

1npm run dev

Esto compilará automáticamente el contenido en una página web y lo servirá desde localhost:3030. También abrirá una ventana del navegador para mostrar el contenido, como se ve aquí:

Escribir el contenido en sí es tan sencillo como escribir un archivo README en Markdown, algo con lo que la mayoría de los desarrolladores están muy familiarizados. Aquí tienes un ejemplo de una diapositiva con una lista con viñetas:

1---
2
3# What is Slidev?
4
5Slidev is a slide deck maker and presenter designed for developers, and consists of the following features
6
7- 📝 **Text-based** - focus on the content with Markdown, and then style them later
8- 🎨 **Themable** - theme can be shared and used with npm packages
9- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
10- 🤹 **Interactive** - embedding Vue components to enhance your expressions
11- 🎥 **Recording** - built-in recording and camera view
12- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
13- 🛠 **Hackable** - anything possible on a webpage
14
15<br>
16<br>
17
18Read more about [Why Slidev?](https://sli.dev/guide/why)
19
20<!--
21You can have a `style` tag in markdown to override the style for the current page.
22Learn more: https://sli.dev/guide/syntax#embedded-styles
23-->
24
25<style>
26h1 {
27  background-color: #2B90B6;
28  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
29  background-size: 100%;
30  -webkit-background-clip: text;
31  -moz-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  -moz-text-fill-color: transparent;
34}
35</style>

Veamos las partes de este fragmento de código que componen la diapositiva:

1. --- inicia una diapositiva nueva y configura los ajustes que esta necesita. En este caso, no hizo falta personalizar Slidev.

2. El encabezado de Markdown # What is Slidev? define el título correspondiente de la diapositiva.

3. El cuerpo de la diapositiva va después del título y se escribe con la sintaxis habitual de Markdown. Observa que puedes incluir saltos de línea en HTML con <br>, además de emojis o enlaces al estilo de Markdown al final de la diapositiva.

4. El bloque de comentarios HTML no aparece en las diapositivas, ya que está reservado para las notas del presentador. ¡Es una buena forma de incluir tus ideas en el contenido!

5. La etiqueta de estilo en línea se usa para reemplazar el estilo del tema para el título del encabezado (que solo tiene texto blanco) y aplicar un color degradado.

Aquí tienes una captura de pantalla de cómo se muestra el diseño de esa diapositiva:

Cuando pasas mucho tiempo revisando fragmentos de código fuente, como me pasa a mí al presentar puntos sobre código vulnerable y buenas prácticas de seguridad, es muy útil contar con resaltado de código.

Veamos el siguiente código de Slidev:

1---
2layout: image-right
3image: https://source.unsplash.com/collection/94734566/1920x1080
4---
5
6# Code
7
8Use code snippets and get the highlighting directly![^1]
9
10ts {all|2|1-6|9|all}
11interface User {
12  id: number
13  firstName: string
14  lastName: string
15  role: string
16}
17
18function updateUser(id: number, update: User) {
19  const user = getUser(id)
20  const newUser = { ...user, ...update }
21  saveUser(id, newUser)
22}
23
24<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">
25
26[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

Esta diapositiva comienza con una personalización específica, definida dentro del bloque YAML de apertura y cierre ---. Configura el diseño para mostrar una imagen a la derecha y especifica la URL de esa imagen.

Después, define el título y el contenido de la diapositiva, que incluyen resaltado de código. El fragmento de código responde a los clics del mouse y sigue este patrón de animación:

1. Al principio, Slidev resalta todo el bloque de código, como indica la directiva ts {all} que inicia el bloque.

2. Cada clic del mouse para avanzar la animación de la diapositiva resalta una parte específica del código: primero la línea 2, luego las líneas 1 a 6, después la línea 9 y, al final, vuelve a resaltar todo.

3. Luego se usa el componente <arrow> para señalar una línea de código mediante coordenadas x e y (que, lo admito, no son muy intuitivas). Se activa específicamente con el tercer clic del mouse, como indica el atributo v-click=”3”.

4. Por último, incluye notas al pie, una buena forma de dar crédito por las imágenes o citar referencias mencionadas en las diapositivas.

La siguiente captura de pantalla muestra esta diapositiva en acción:

Para terminar esta guía de introducción, te recuerdo que, como Slidev se basa en Vue.js, puedes definir y usar cualquier componente de Vue directamente en la sintaxis Markdown de tus diapositivas, incluidos los que ofrecen los temas que importes. Obtén más información sobre los componentes de Vue de Slidev en la guía de documentación.

Exportación de Slidev, temas y otras funciones para presentaciones

Vimos cómo empezar a usar Slidev y Markdown. Pero Slidev incluye muchas más funciones que me interesa explorar para mis presentaciones en público. Estas son algunas de las que más me entusiasman.

Temas de Slidev y cambio entre modo claro y oscuro

Imagina que pasas mucho tiempo creando tu presentación y, al llegar, te das cuenta de que la iluminación del lugar de la conferencia no es la que esperabas. No te queda más opción que presentar sabiendo que gran parte del contenido será difícil de leer. Es frustrante.

Con Slidev, la solución es sencilla. El botón Alternar modo oscuro en la barra de herramientas de las diapositivas te permite cambiar entre los temas de modo claro y modo oscuro, y así evitar problemas de iluminación y legibilidad. Asegúrate de que esta función esté disponible en el tema que uses. La he encontrado en el tema predeterminado de Slidev y en algunos otros que he probado. En general, me alegra ver que quienes diseñan temas la están incorporando.

En la página de documentación de Slidev Themes ya hay varios temas seleccionados, pero puedes buscar en el registro de npm paquetes publicados con la etiqueta slidev-theme para encontrar más.

Modo de presentación sencillo con Slidev

Otra función útil es el modo de presentador, al que puedes acceder desde una URL específica. A diferencia de otras aplicaciones para presentaciones, en las que el modo de presentador está integrado en el botón de alternancia de Vista de presentación, con Slidev puedo acceder a este modo desde el navegador y revisar mis notas o las siguientes diapositivas abriendo el enlace en mi celular o tablet.

Exportar una presentación de Slidev o simplemente compartirla en línea

Para exportar tu presentación de Slidev a PDF o PNG, debes procesarla con Playwright, que básicamente captura la pantalla de un navegador sin interfaz gráfica.

Es bastante fácil y mucho más sencillo de lo que parece, pero vale la pena entender cómo funciona. La página de documentación de Slidev Export explica todos los detalles, incluido cómo alternar entre los modos claro y oscuro de las diapositivas y cómo funcionan las animaciones con clics.

Sin embargo, he estado pensando en compartir mi presentación de Slidev con los siguientes pasos:

1. Las diapositivas se alojan en un repositorio de GitHub.

2. Se ejecuta un proceso de CI con cada commit y genera un sitio web estático en vivo que se publica en Vercel o Netlify.

3. El mismo proceso de CI también genera la exportación en PDF de Slidev como parte de la compilación, y GitHub Actions puede guardarla como un artefacto. Sin embargo, los artefactos solo se conservan durante 90 días, así que tendríamos que buscar otra opción. Una posibilidad sería subir el archivo PDF generado al repositorio de GitHub.

Programa tus presentaciones con Slidev

¡Eso es todo! Gracias por leer sobre mi experiencia al programar presentaciones con Slidev. Espero que te inspire a probar un enfoque similar o a encontrar una forma aún mejor de crear presentaciones programables y personalizadas.