Tutorial : Presentaciones con HackMD
Últimamente he estado experimentando con HackMD, una plataforma en línea que permite escribir y compartir documentos en Markdown. Lo interesante es que, más allá de escribir notas, también puedes crear excelentes presentaciones.
En este artículo comparto lo que he descubierto, por qué lo estoy usando para preparar mis trabajos y charlas técnicas, y además dejaré algunos ejemplos reales que he preparado para que puedas explorar y adaptarlo a tus necesidades.
¿Qué es HackMD?
HackMD es un editor colaborativo de Markdown basado en la web, pensado para facilitar la escritura de contenido técnico y su distribución. Es como una mezcla entre Google Docs y un IDE ligero, pero con soporte completo para Markdown, LaTeX y varias librerías adicionales.
La plataforma fue lanzada originalmente en 2016 por la startup HackMD Co., Ltd., fundada en Taiwán.
Con el paso del tiempo, HackMD se volvió popular entre comunidades open source, equipos DevOps y startups. Además, se lanzó una versión open source llamada CodiMD, ideal para quienes quieren alojar su propia instancia personalizada.
- Código Fuente (CodiMD): https://github.com/hackmdio/codimd
HackMD integra reveal.js para crear fácilmente presentaciones con una serie de diapositivas dentro de una nota en Markdown.
Cambiar a Modo de Diapositivas
Podemos elegir el Modo de diapositiva desde el menú desplegable “Modo” (de forma predeterminada se muestra el Modo de visualización) en el menú uso compartido en la esquina superior derecha y presiona en “vista previa” para ver su diapositiva.
Crear Diapositivas
La estructura básica es simple, cada diapositiva regular se separa con un interlineado de tres guiones (---) y las diapositivas de sección por un interlineado de cuatro guiones (----). Por ejemplo, las diapositivas se escriben de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Diapositiva 1
text
---
# Diapositiva 2
text
----
## Diapositiva 2.1
text
----
## Diapositiva 2.2
text
---
# Diapositiva 3
text
Diapositivas Personalizada
Cada sección separada por --- se convierte automáticamente en una diapositiva. Reveal.js asigna a cada una de ellas una clase CSS llamada .slide. Esta clase se puede usar para asignar atributos especiales como transiciones, alineación, estilos y más.
A continuación, puedes ver algunos de estos atributos especiales:
| Atributo | Descripción |
|---|---|
data-transition="..." | Tipo de transición (fade, slide, etc.) |
data-background-color | Cambia el fondo de esa diapositiva |
data-background-image | Añade una imagen de fondo |
data-background-video | Usa un video de fondo |
data-auto-animate | Activa animaciones automáticas entre slides |
Configurar Transiciones
En HackMD, puedes usar bloques de HTML embebido antes de cada diapositiva para asignarle una transición específica.
1
<!-- .slide: data-transition="fade-in zoom-out" -->
Esto es un comentario HTML especial que HackMD y Reveal.js interpretan como una instrucción para la siguiente diapositiva. Se compone de tres partes:
<!--: indica el inicio del comentario HTML..slide:: especifica que el atributo debe aplicarse al contenedor<section>de la diapositiva.data-transition="...": es el atributo Reveal.js que define el tipo de transición.fade-in: la diapositiva entra con un efecto de desvanecimiento.zoom-out: la diapositiva sale con un efecto de alejamiento.
Escribir y Resaltar Bloques de Código
Una de las mayores ventajas de usar HackMD para documentación técnica es su excelente soporte de código fuente. Utiliza la librería de Highlight.js, lo que significa que reconoce automáticamente más de 180 lenguajes de programación y los resalta correctamente.
Para comenzar a resaltar código, se debe usar tres backticks (```) para iniciar y cerrar un bloque de código. Después de los primeros backticks, puedes indicar el lenguaje:
1
2
3
4
```python
def saludar(nombre):
print(f"Hola, {nombre}")
```