antfu/slidev

O que slidev faz?

Crie e apresente slides baseados na web para desenvolvedores usando Slidev com Markdown, componentes Vue, destaque de código, animações e recursos interativos. Use ao criar apresentações técnicas, palestras em conferências, demonstrações de código, materiais de ensino ou decks para desenvolvedores.

Funcionalidades

• Markdown Simples: Escreva slides em Markdown puro com extensões para slides
• Componentes Vue: Incorpore componentes Vue interativos diretamente nos slides
• Destaque de Código: Destaque de sintaxe com suporte a centenas de linguagens
• Animações: Animações suaves entre slides e dentro de elementos
• LaTeX: Suporte a fórmulas matemáticas com LaTeX
• Diagramas: Diagramas Mermaid e GraphViz
• Edição ao Vivo: Visualização em tempo real enquanto você edita
• Temas: Temas personalizáveis ou crie o seu próprio
• Exportação: Exporte para PDF, PNG ou como SPA
• Apresentação: Modo de apresentador com notas e cronômetro

Como usar

1. Crie um novo projeto:

   npx create-slidev meu-projeto
   cd meu-projeto
   

2. Inicie o servidor de desenvolvimento:

   npm run dev
   

3. Edite seus slides:

   • Abra slides.md no seu editor
   • Os slides atualizam automaticamente no navegador

4. Apresente:

   • Pressione Espaço para avançar
   • Pressione O para visão geral
   • Pressione D para modo escuro
   • Pressione F para modo tela cheia

Estrutura de slides

---
# Primeiro Slide
---

# Título do Slide
Conteúdo em Markdown

---
layout: dois-paineis
---

::esquerda::
# Painel Esquerdo
Conteúdo aqui

::direita::
# Painel Direito
Mais conteúdo

Exemplo de slide com código

---
level: 2
---

# Exemplo de Código

```ts
function saudacao(nome: string) {
  return `Olá, ${nome}!`;
}

console.log(saudacao('Slidev'));

## Comandos da CLI

| Comando | Descrição |
|---------|-----------|
| `slidev` | Inicia servidor de desenvolvimento |
| `slidev build` | Constrói para produção (SPA) |
| `slidev export` | Exporta para PDF |
| `slidev format` | Formata o arquivo de slides |

## Temas

Liste os temas disponíveis:
- `@slidev/theme-default` - Tema padrão
- `@slidev/theme-seriph` - Tema com serifa
- `@slidev/theme-apple` - Tema estilo Apple

## Recursos adicionais

- [Documentação do Slidev](https://sli.dev)
- [Galeria de Temas](https://sli.dev/themes/gallery.html)
- [Componentes Vue integrados](https://sli.dev/builtin/components.html)
- [Exemplos de slides](https://sli.dev/demo)