Cómo Programar tus Presentaciones en Markdown con Slidev
Crear presentaciones no debería sentirse como un cambio de contexto en tu flujo de trabajo de desarrollo. Sin embargo, las herramientas tradicionales te obligan a usar interfaces de arrastrar y soltar, formatos propietarios y pesadillas de control de versiones. Slidev ofrece un enfoque diferente: diapositivas basadas en Markdown respaldadas por las mismas herramientas de frontend que ya utilizas.
Este artículo cubre el flujo de trabajo principal de presentaciones con Slidev—desde la creación hasta la exportación—y explica por qué resulta atractivo para desarrolladores que desean tener sus diapositivas bajo control de versiones.
Puntos Clave
- Slidev es una aplicación Vue 3 impulsada por Vite que utiliza Markdown como formato de entrada principal para crear presentaciones
- Las diapositivas se separan con
---y se configuran mediante frontmatter YAML en un archivoslides.md - Los componentes Vue pueden integrarse directamente en Markdown para añadir interactividad, animaciones y diagramas
- Las opciones de exportación incluyen PDF, PNG, PPTX y aplicaciones de página única desplegables
- El control de versiones, la extensibilidad y la alineación con el flujo de trabajo hacen que Slidev sea ideal para desarrolladores frontend
Qué Hace Diferente a Slidev de Otras Herramientas de Presentación
Slidev no es solo un generador de diapositivas. Es una aplicación Vue 3 impulsada por Vite que trata Markdown como su formato de entrada principal. Esta distinción es importante porque obtienes todo el poder de las herramientas frontend modernas: reemplazo de módulos en caliente durante el desarrollo, arquitectura basada en componentes y un ecosistema de plugins.
A diferencia de PowerPoint o Google Slides, tu presentación existe como archivos de texto plano. A diferencia de herramientas más antiguas como Reveal.js, Slidev se integra directamente con el ecosistema Vue. Puedes insertar componentes Vue en tu Markdown cuando necesites interactividad más allá de lo que ofrecen las diapositivas estáticas.
El resultado son presentaciones que se sienten nativas para los desarrolladores frontend. Tu conocimiento existente de CSS, JavaScript y arquitectura de componentes se transfiere directamente.
El Flujo de Trabajo Principal de Presentaciones con Slidev
Creación de Diapositivas en Markdown
Un proyecto Slidev se centra en un archivo slides.md. Cada diapositiva se separa con ---, y configuras diapositivas individuales o toda la presentación mediante frontmatter YAML.
---
theme: default
---
# Bienvenida
El contenido de tu primera diapositiva aquí.
---
# Segunda Diapositiva
- Las viñetas funcionan como se espera
- También funciona el texto en **negrita** y *cursiva*La sintaxis estándar de Markdown maneja la mayor parte del contenido: encabezados, listas, enlaces e imágenes. Los bloques de código obtienen resaltado de sintaxis automáticamente. Cuando necesitas algo que Markdown no puede expresar, escribes HTML o componentes Vue en línea.
Ejecutar el Servidor de Desarrollo
La CLI inicia un servidor de desarrollo local con recarga en caliente. Edita tu archivo Markdown y el navegador se actualiza inmediatamente. Una vista de presentador muestra tu diapositiva actual, la siguiente diapositiva y las notas del orador, accesibles a través de una URL separada de vista de presentador.
Este ciclo de retroalimentación ajustado hace que la iteración sea rápida. No estás esperando exportaciones o reconstrucciones.
Organización de Presentaciones Más Grandes
Para presentaciones sustanciales, divide el contenido en múltiples archivos. La propiedad src en el frontmatter importa archivos Markdown externos:
---
src: ./slides/introduction.md
---
---
src: ./slides/main-content.md
---Este patrón mantiene los archivos individuales manejables y te permite reordenar secciones moviendo las declaraciones de importación.
Discover how at OpenReplay.com.
Extender Diapositivas con Componentes Vue
Las herramientas frontend de Slidev brillan cuando necesitas más que contenido estático. Cualquier componente Vue funciona dentro de tu Markdown—ya sea del tema, de un paquete de terceros o de tu propio directorio components/.
Los casos de uso comunes incluyen:
- Animaciones de clic: La directiva
v-clickrevela contenido progresivamente - Diagramas: El soporte integrado de Mermaid renderiza diagramas de flujo y diagramas de secuencia desde texto
- Código en vivo: Las incrustaciones del editor Monaco permiten la edición de código en vivo durante las presentaciones
- Diseños personalizados: Construye plantillas de diapositivas reutilizables como componentes Vue
No estás limitado a lo que la herramienta proporciona de fábrica.
Exportación y Compartición de Presentaciones
La exportación es una característica de primera clase, no una idea de último momento. Slidev produce:
- PDF: Para compartir sin conexión o imprimir
- PNG: Imágenes de diapositivas individuales
- PPTX: Cuando alguien insiste en PowerPoint
- SPA: Una aplicación de página única estática que puedes desplegar en cualquier lugar
La exportación SPA merece atención. Despliégala en Vercel, Netlify o GitHub Pages, y tu presentación se convierte en una URL compartible. Combina esto con pipelines de CI/CD, y cada commit a tu repositorio produce un despliegue actualizado.
Por Qué los Desarrolladores Frontend Eligen Slidev
El atractivo se reduce a la alineación del flujo de trabajo:
- Control de versiones: Compara tus diapositivas, revisa cambios en pull requests y mantén un historial
- Reutilización de habilidades existentes: CSS, Vue y JavaScript funcionan exactamente como se espera
- Extensibilidad: Los temas y plugins siguen las convenciones de npm
- Personalización: Sobrescribe cualquier cosa mediante tecnologías web estándar
Si te sientes cómodo con Markdown y las herramientas modernas de JavaScript, Slidev elimina fricción en lugar de añadirla.
Primeros Pasos
Inicializa un nuevo proyecto a través de la CLI de Slidev con tu gestor de paquetes preferido:
npm init slidev@latestEl proyecto generado incluye diapositivas de ejemplo que demuestran las características principales. Desde ahí, reemplaza el contenido de muestra con el tuyo propio y ejecuta el servidor de desarrollo.
La documentación oficial cubre detalles de sintaxis, instalación de temas y configuración avanzada. Comienza simple—contenido Markdown con estilo predeterminado—y luego añade componentes y personalización según sea necesario.
Conclusión
Slidev convierte las presentaciones en un flujo de trabajo mantenible y centrado en código. Al tratar las diapositivas como archivos Markdown impulsados por Vue y Vite, se alinea con la forma en que los desarrolladores frontend ya trabajan. El control de versiones se vuelve natural, la personalización utiliza tecnologías web familiares y las opciones de exportación cubren todos los escenarios de compartición. Tus diapositivas merecen las mismas herramientas que tus aplicaciones.
Preguntas Frecuentes
Sí. Las presentaciones básicas solo requieren conocimiento de Markdown. Los componentes Vue son opcionales y solo se necesitan cuando deseas interactividad como animaciones o demostraciones de código en vivo. Puedes crear presentaciones completas usando solo sintaxis Markdown para texto, listas, imágenes y bloques de código.
Añade notas del orador usando comentarios HTML en tu Markdown. Coloca tus notas dentro de etiquetas de comentario debajo del contenido de la diapositiva. Estas notas aparecen en la vista del presentador pero permanecen ocultas para la audiencia durante tu presentación.
Sí. La exportación SPA genera archivos estáticos que puedes alojar en cualquier lugar, incluyendo GitHub Pages, Netlify o Vercel. No se requiere procesamiento del lado del servidor. Los archivos exportados funcionan como una aplicación web independiente que se ejecuta completamente en el navegador.
Sí. Slidev utiliza Shiki para el resaltado de sintaxis, admitiendo más de 100 lenguajes de programación de fábrica. También puedes habilitar el resaltado de líneas, números de línea e integración del editor Monaco para edición de código en vivo directamente en tus diapositivas.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
