Markdown a Presentaciones

Escribe presentaciones como escribes READMEs: encabezados de Markdown, listas con viñetas, bloques de código, separados por reglas horizontales --- en diapositivas. La herramienta renderiza tu presentación en vivo usando Reveal.js (temas: black, white, simple, solarized), soporta notas del presentador con Nota:, diapositivas verticales anidadas con --, y exporta a un archivo HTML autónomo o un PDF listo para imprimir.

Cómo Markdown se convierte en una presentación

  1. 1

    Escribe Markdown

    Usa `---` para separar diapositivas. Los encabezados, listas y bloques de código estándar funcionan como de costumbre.

  2. 2

    Agrega notas del presentador

    Prefija un párrafo con `Nota:`, solo se muestra en modo presentador.

  3. 3

    Previsualiza la presentación

    La previsualización en vivo muestra la presentación con navegación por teclas de flecha.

  4. 4

    Elige un tema

    black, white, league, sky, simple, solarized, cualquier tema de Reveal.js.

  5. 5

    Exportar

    Archivo HTML autónomo o PDF a través de la impresión del navegador.

La sintaxis de la diapositiva

# Diapositiva de apertura

Texto del subtítulo aquí

---

## Segunda diapositiva

- Viñeta uno
- Viñeta dos
- Viñeta tres

Nota: estas son notas del presentador solo visibles en modo presentador.

---

## Diapositiva de código

\`\`\`python
def hello(name):
    return f"Hola {name}"
\`\`\`
  • --- (tres guiones en su propia línea) inicia una nueva diapositiva horizontal.
  • -- (dos guiones) inicia una diapositiva vertical dentro de la columna de la diapositiva actual, presiona la flecha hacia abajo para descender.
  • Nota: al inicio de un párrafo se convierte en una nota del presentador.

Navegación por teclado

Tecla Acción
Derecha / Espacio Siguiente diapositiva
Izquierda Diapositiva anterior
Abajo / Arriba Navegar por la pila vertical
s Abrir vista del presentador
o Resumen de diapositivas
f Pantalla completa
? Diálogo de ayuda

Trucos de diseño

  • Diseño de dos columnas: usa HTML en bruto dentro de una diapositiva, <div class="columns">...</div>.
  • Revelar fragmentos: las listas con viñetas se animan una a la vez con el atributo {.fragment} al usar Reveal.js directamente. Agrega como HTML en bruto si lo necesitas.
  • Imágenes de fondo: el atributo a nivel de diapositiva <!-- .slide: data-background="url" --> establece un fondo a página completa.
  • Auto-animar entre diapositivas: Reveal 4 soporta transiciones suaves para elementos coincidentes, actívalo en la configuración del tema.

Exportando a PDF

Desde la previsualización en vivo, abre ?print-pdf en la URL de tu navegador y usa el diálogo de impresión del navegador. Elige A4 apaisado, gráficos de fondo activados, márgenes mínimos. Reveal.js genera una diapositiva por página con notas del presentador en páginas adicionales opcionales.

Cuándo brillan las diapositivas basadas en Markdown

  • Charlas técnicas con muchos ejemplos de código.
  • Presentaciones centradas en el contenido donde el diseño es secundario.
  • Documentos como diapositivas, mantén las presentaciones junto al README del proyecto en git.
  • Material de capacitación controlado por versiones.

Cuándo no

  • Presentaciones pesadas en diseño con colocación precisa de imágenes.
  • Diapositivas que necesitan animaciones complejas o sincronización de video embebido.
  • Presentaciones gobernadas por marca donde las plantillas dictan cada detalle.

Preguntas frecuentes

Sí, la sintaxis de imagen de Markdown regular funciona. Usa URLs absolutas o sube imágenes primero para que sean accesibles desde el HTML exportado.

Sí, opcionalmente. El modo de impresión de Reveal soporta “notas como página separada”, cada diapositiva se convierte en dos páginas PDF, una con la diapositiva, una con las notas.

No. El renderizado es local en tu navegador. La fuente Markdown y el HTML exportado nunca salen de tu máquina.

Sí. Agrega un bloque <style> en la parte superior de tu Markdown o enlaza una hoja de estilo externa en la configuración del tema. Se inyecta en la salida de Reveal.js.

El HTML exportado es un archivo autónomo que funciona en cualquier host estático, GitHub Pages, Netlify, S3. Sube el HTML y listo.

Herramientas relacionadas

Herramienta disponible en otros idiomas