Primeros pasos
Introducción
Slidev (slide + dev, /slʌɪdɪv/) es un creador y presentador de diapositivas basado en la web. Está diseñado para que los desarrolladores se centren en la escritura de contenido en Markdown, mientras que también tiene el poder de los componentes HTML y Vue para ofrecer diseños y plantillas pixel-perfect con demostraciones interactivas incrustadas en sus presentaciones.
Utiliza un archivo Markdown rico en funciones para generar diapositivas bonitas con una experiencia de recarga instantánea, junto con muchas integraciones incorporadas como la escritura de código en vivo, la exportación de PDF, la grabación de presentaciones, etc. Dado que está impulsado por la web, puedes hacer cualquier cosa con Slidev: las posibilidades son infinitas.
Puedes obtener más información sobre la justificación del proyecto en la sección de Por qué Slidev.
Características
- 📝 Basado en Markdown - utiliza tus editores y forma de trabajar favoritos.
- 🧑💻 Pensado para desarrolladores - resaltado de sintaxis integrado, escritura de código en vivo, etc.
- 🎨 Tematizable - un tema puede ser compartido y usado con paquetes npm.
- 🌈 Con estilo - Utilidades de Windi CSS bajo demanda o UnoCSS.
- 🤹 Interactivo - incrusta componentes de Vue sin problemas
- 🎙 Modo Presentador - usa otra ventana, o incluso tu teléfono para controlar las diapositivas
- 🎨 Drawing - dibuja y anota en tus diapositivas
- 🧮 LaTeX - soporte integrado para ecuaciones matemáticas en LaTeX
- 📰 Diagramas - crea diagramas con descripciones textuales
- 🌟 Iconos - acceso directo a iconos de cualquier set
- 💻 Editores - editor integrado, o extensión para VS Code
- 🎥 Grabar - grabación y vista de cámara integrados
- 📤 Portable - exporta a PDF, PNGs, o incluso un SPA alojable
- ⚡️ Rápido - recarga instantánea impulsada por Vite
- 🛠 Hackeable - usando plugins de Vite, componentes de Vue, o cualquier paquete de npm
Tecnologías
Slidev es posible gracias a la combinación de estas herramientas y tecnologías.
- Vite - Una herramienta de frontend extremadamente rápida
- Vue 3 potenciado por Markdown - Céntrate en el contenido mientras dispones de la potencia de los componentes HTML y Vue siempre que lo necesites
- Windi CSS o UnoCSS - Framework de CSS de utilidades bajo demanda, estilizando tus diapositivas con facilidad
- Prism, Shiki, Monaco Editor - Fragmentos de código con edición en vivo de primera clase
- RecordRTC - Grabación y vista de cámara integrados
- VueUse -
@vueuse/core,@vueuse/head,@vueuse/motion, etc. - Iconify - Colecciones de iconos.
- Drauu - Soporte de dibujos y anotaciones.
- KaTeX - Renderizado matemático de LaTeX.
- Mermaid - Diagramas textuales.
Preparando tu primera presentación
Pruébalo online
Créalo localmente
Con NPM:
$ npm init slidev
Con Yarn:
$ yarn create slidev
Sigue las instrucciones, ¡y empieza a crear tus diapositivas ahora! Para obtener más detalles sobre la sintaxis de Markdown, lee la guía de sintaxis.
Interfaz de la línea de comandos
En un proyecto donde Slidev está instalado, puedes usar el binario slidev en tus scripts npm.
{
"scripts": {
"dev": "slidev", // start dev server
"build": "slidev build", // build for production SPA
"export": "slidev export" // export slides to pdf
}
}
Sino, puedes usarlo con npx
$ npx slidev
Ejecuta slidev --help para ver más opciones disponibles.
Sintaxis de Markdown
Slidev lee tu archivo slides.md bajo la raíz de tu proyecto y lo convierte a diapositivas. Cada vez que haces cambios, el contenido de las diapositivas se reflejará automáticamente. Por ejemplo:
# Slidev
Hola mundo
---
# Página 2
Usa directamente bloques de código para el resaltado
//```ts
console.log('¡Hola, mundo!')
//```
---
# Página 3
Lee más sobre la sintaxis de Markdown de Slidev en la guía de sintaxis.