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, hojas de estilos fáciles de incrustar.
  • 🤹 Interactivo - incrusta componentes de Vue sin problemas
  • 🎙 Modo Presentador - usa otra ventana, o incluso tu teléfono para controlar las 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.

Preparando tu primera presentación

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, lea 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.