# 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.

• Vite - Uma ferramenta para front-end extremamente rápida
• Vue 3 com Markdown - Foco no conteúdo a ainda ter o poder do HTML e dos componentes do Vue quando precisar
• Windi CSS - Framework CSS com utilidades sob demanda, estilize seus slides com facilidade
• Prism, Shiki, Monaco Editor - Suporte a blocos de código como codificação em tempo real
• RecordRTC - Gravação e visão da câmera integrados
• Família VueUse - @vueuse/core, @vueuse/head, @vueuse/motion, etc.
• Iconify - Coleção de ícones.
• Drauu - Suporte à desenhos e anotações
• KaTeX - Renderização do LaTeX.
• Mermaid - Diagramas baseados em texto.

# 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.