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
Escribe Markdown
Usa `---` para separar diapositivas. Los encabezados, listas y bloques de código estándar funcionan como de costumbre.
-
2
Agrega notas del presentador
Prefija un párrafo con `Nota:`, solo se muestra en modo presentador.
-
3
Previsualiza la presentación
La previsualización en vivo muestra la presentación con navegación por teclas de flecha.
-
4
Elige un tema
black, white, league, sky, simple, solarized, cualquier tema de Reveal.js.
-
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
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Generador de EditorConfig
Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.
Herramienta disponible en otros idiomas
- Markdown till bildspel [SV]
- تحويل ماركداون إلى شرائح عرض [AR]
- Markdown sang Slide [VI]
- Markdown vers Diapositives [FR]
- Markdown ke Slide [ID]
- Markdown을 슬라이드로 변환 [KO]
- Markdown naar slides [NL]
- Markdown zu Folien [DE]
- แปลง Markdown เป็นสไลด์ [TH]
- Markdown na slajdy [PL]
- Markdown para Apresentações [PT]
- Markdown をスライドに変換 [JA]
- Markdown to Slides [EN]
- Markdown in Diapositive [IT]
- Markdown в слайды [RU]
- Markdown'dan Slaytlara [TR]
- 将 Markdown 转换为幻灯片 [ZH]