Primeiros Passos

Introdução

Slidev (slide + dev, /slʌɪdɪv/) é uma ferramenta baseada em tecnologias web para criar e apresentar slides. O Slidev foi projetado para desenvolvedores focarem em escrever conteúdo em Markdown e ainda ter o poder do HTML e dos componentes do Vue para fornecer layouts e designs perfeitos com demonstrações interativas de suas apresentações.

É usado um arquivo Markdown cheio de recursos para gerar slides bonitos com uma experiência de refresh instantâneo, além de várias integrações embutidas como desenvolvimento de código em tempo real, exportação pra PDF, gravação da apresentação, e assim por diante. Como tem como base tecnologias da web, você pode fazer tudo com o Slidev - as possibilidades são infinitas.

Você pode saber mais sobre a lógica por trás do projeto na seção Por que Slidev.

Funcionalidades

  • 📝 Baseado em markdown - use seus editores fluxos de trabalho favoritos
  • 🧑‍💻 Feito para desenvolvedores - destaque de sintaxe integrado, desenvolvimento de código em tempo real, etc.
  • 🎨 Suporte a Temas - temas podem ser compartilhados e usados com pacotes do npm
  • 🌈 Estiloso - utilidades do Windi CSS sob demanda, fácil incorporação de CSS
  • 🤹 Interativo - suporta perfeitamente a incorporação de componentes do Vue
  • 🎙 Modo Apresentador - use outra janela, ou até mesmo seu celular para controlar seus slides
  • 🎨 Desenhos - desenhe e anote em seus slides
  • 🧮 LaTeX - suporte integrado à equações matemáticas em LaTeX
  • 📰 Diagramas - cria diagramas com descrições em texto
  • 🌟 Ícones - acesse ícones de qualquer conjunto diretamente
  • 💻 Editores - editor integrado, ou uma extensão para o VS Code
  • 🎥 Gravação - gravação integrada e visão da câmera
  • 📤 Portátil - exporte para PDF, PNGs, ou até mesmo uma aplicação SPA hospedável
  • ⚡️ Rápido - refresh instantâneo provido pelo Vite
  • 🛠 Customizável - usando plug-ins do Vite, componentes do Vue, ou qualquer pacote do npm

Tecnologias

O Slidev é possível pela combinação dessas ferramentes e tecnologias.

Criando Sua Primeira Apresentação


Experimente online

sli.dev/new

Crie Localmente

Com NPM:

$ npm init slidev

Com Yarn:

$ yarn create slidev

Siga as instruções e comece a fazer seus slides agora mesmo! Para mais detalhes sobre a sintaxe do markdown, dê uma olhada no guia de sintaxe.

Interface de Linha de Comando

Em um projeto onde o Slidev está instalado, você pode usar o binário slidev nos seus scripts do npm.

{
  "scripts": {
    "dev": "slidev", // inicia um servidor para desenvolvimento
    "build": "slidev build", // compila a aplicação SPA para produção
    "export": "slidev export" // exporta seus slides para pdf
  }
}

Você também pode usá-lo com o npx

$ npx slidev

Rode slidev --help para mais opções disponíveis.

Sintaxe do Markdown

O Slidev lê o seu arquivo slides.md na raiz do seu projeto e o converte em slides. A qualquer alteração que você faça nele, o conteúdo dos slides serão atualizados imediatamente. Por exemplo:

# Slidev

Olá Mundo

---

# Página 2

Use blocos de código diretamente para o destaque

//```ts
console.log('Olá, Mundo!')
//```

---

# Página 3

Leia mais sobre a sintaxe Markdown do Slidev no guia de sintaxe.