Slidev

Sintaxe do Markdown

Os slides são escritos em um único arquivo markdown (por padrão ./slides.md).

Você pode usar os recursos do Markdown normalmente, com suporte adicional de HTML inline e Componentes do Vue. Estilização usando o Windi CSS também é suportada. Use --- seguido de uma nova linha para separar seus slides.

# Slidev

Olá, Mundo!

---

# Página 2

Use blocos de código diretmente para ter destaque na sintaxe

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

---

# Página 3

Você pode usar o Windi CSS e componentes Vue diretamente para estilizar e enriquecer seus slides.

<div class="p-3">
  <Tweet id="20" />
</div>

Front Matter & Layouts

Especifique layouts e outros metadados para cada slide convertendo os separadores em blocos front matter. Cada frontmatter começa e termina com três traços (---). Os textos entre os traços são dados no formato YAML. Por exemplo:

---
layout: cover
---

# Slidev

Esta é a página capa.

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---​

# Página 2

Esta é uma página com o layout `center` e uma imagem de fundo.

---

# Página 3

Está pe uma página padrão sem nenhum metadado adicional.

Dê uma olhada em customização para mais detalhes.

Blocos de Código

Um grande motivo pelo qual eu estou desenvolvendo o Slidev é a necessidade de fazer meu código aparecer perfeitamente nos slides. Então como você deve estar pensando, você pode usar blocos de código no estilo do Markdown para destacar seu código.

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

Nós suportamos o Prism e o Shiki como destacadores de sintaxe. Consulte a seção de destacadores para mais detalhes.

Realce de Linha

Para realçar linhas específicas, simplesmente adicione o número das linhas em chaves {}. A contagem do número das linhas começa a partir do 1.

//```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Para definir os realces em vários passos, você pode usar | para separá-los. Por exemplo:

//```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Isto vai primeiro realçar a: Ref<number> | number e b: Ref<number> | number, aí return computed(() => unref(a) + unref(b)) após um clique, e por último, o bloco inteiro. Aprenda mais no guia de animações no clique.

Editor Monaco

Sempre que quiser fazer alguma modificação na apresentação, simplesmente adicione {monaco} após o id da linguagem — isto transforma o bloco em um editor Monaco com todos os seus recursos!

//```ts {monaco}
console.log('OláMundo')
//```

Aprenda mais sobre configurar Monaco.

Estilos Embutidos

Você pode usar a tag <style> diretamente no seu Markdown para sobrepor estilos no slide atual.

# Isso está Vermelho

<style>
h1 {
  color: red
}
</style>

---

# O próximo slide não é afetado

A tag <style> no Markdown sempre segue um escopo. Para redefinir estilos globalmente, dá uma olhada na seção de customização.

Graças ao Windi CSS, você pode usar aninhamento de CSS diretamente, além de diretrizes (e.g. @apply).

# Slidev

> Olá `mundo`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

Recursos Estáticos

Assim como você faria no markdown, você pode usar imagens apontando para uma URL remota ou local.

Para recursos estáticos, o vite-plugin-remote-assets embutido vai criar um cache na memória na primeira execução para que você possa ter o carregamento instantâneo depois, até pra imagens maiores.

![Imagem Remota](https://sli.dev/favicon.png)

Para recursos locais, os coloque na pasta public e depois a referencie com uma barra no início.

![Imagem Local](/foto.png)

Se quiser aplicar tamanhos ou estilos customizados, você pode converter para uma tag <img>

<img src="/foto.png" class="m-40 h-40 rounded shadow" />

Notas

Você também pode fazer anotações em cada slide. Elas aparecerão no Modo Apresentador para que você possa usá-las como referência durante apresentações.

Em Markdown, o último bloco de comentário em cada slide será considerado uma nota.

---
layout: cover
---

# Página 1

Esta é a página de capa.

<!-- Isto é uma nota -->

---

# Página 2

<!-- Isto NÃO é uma nota porque vem antes do conteúdo do slide -->

A segunda página

<!--
Isto é outra nota
-->

Ícones

O Slidev te permite acessar quase todos os conjutos de ícones open-source diretamente no seu markdown. Graças ao vite-plugin-icons e ao Iconify.

Os nomes seguem a convenção do Iconify {nome-da-coleção}-{nome-do-icone}. Por exemplo:

Navegue e pesquise por todos os ícones disponíveis com o Icônes.

Estilizando Ícones

Você pode estilizar os ícones como qualquer outro elemento HTML. Por exemplo:

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

Slots

Disponível desde a v0.18

Alguns layouts podem fornecer vários pontos de contribuição usando slots nomeados do Vue.

Por exemplo, no layout two-cols, você pode ter duas colunas lado a lado: a da esquerda (slot default) e a da direita (slot right).

---
layout: two-cols
---

<template v-slot:default>

# Esquerda

Isto é mostrado à esquerda

</template>
<template v-slot:right>

# Direita

Isto é mostrado à direita

</template>

Esquerda

Isto é mostrado à esquerda

Direita

Isto é mostrado à direita

Nós também fornecemos uma sintaxe abreviada ::nome:: para o nome do slot. A seguinte exemplo funciona exatamente como o anterior.

---
layout: two-cols
---

# Esquerda

Isto é mostrado à esquerda

::right::

# Direita

Isto é mostrado à direita

Você também pode explicitamente especificar o slot padrão para ter uma ordenação customizada:

---
layout: two-cols
---

::right::

# Direita

Isto é mostrado à direita

::default::

# Esquerda

Isto é mostrado à esquerda

Configurações

Todas as configurações necessárias podem ser definidas no arquivo Markdown. Por exemplo:

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

# Slidev

Esta a página de capa.

Aprenda mais sobre as configurações do frontmatter.

LaTeX

O Slidev vem com suporte a LaTeX incluído, usando o KaTeX para isso.

Em Linha

Insira um $ em cada lado do seu LaTeX para renderizá-lo na mesma linha.

$\sqrt{3x-1}+(1+x)^2$

Bloco

Use dois ($$) para renderização em bloco. Este modo mostra símbolos maiores e centraliza o resultado.

$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$

Aprenda mais: Demonstração | KaTeX | markdown-it-katex

Diagramas

Você também pode criar diagramas / gráficos a partir de descrições em texto no seu Markdown, renderizado pelo Mermaid.

Blocos de código marcados como mermaid serão convertidos para diagramas, por exemplo:

//```mermaid
sequenceDiagram
  Valentina->Enzo: Olá Enzo, tudo bem?
  Note over Valentina,Enzo: Uma interação clássica
//```

Você pode até passar um objeto com opções para especificar o tamanho e o tema. A sintaxe do objeto é de um objeto literal do JavaScript, você vai precisar adicionar aspas (') para textos e usar vírgula (,) entre cada chave (theme, scale, etc).

//```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Texto] --> C{Decisão}
C -->|Um| D[Resultado 1]
C -->|Dois| E[Resultado 2]
//```

Aprenda mais: Demonstração | Mermaid

Múltiplas Entradas

Disponível desde a v0.15

Você pode dividir seu arquivo slides.md em múltiplos arquivos e organizá-los como preferir.

slides.md :

# Página 1

Está é uma página comum

---
src: ./subpagina2.md
---

<!-- esta página será carregada a partir do arquivo './subpagina2.md' -->
Conteúdo na linha será ignorado

subpage2.md :

# Página 2

Está página é de outro arquivo

Mesclagem de Frontmatter

Você pode prover frontmatters tanto para sua entrada principal quanto em páginas markdown externas. Caso elas tenham chaves repetidas, as da entrada principal têm maior prioridade. Por exemplo:

slides.md :

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md :

---
layout: cover
background: https://sli.dev/foo.png
---

# Capa

Página de Capa

Vai acabar sendo equivalente à seguinte página:

---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---

# Capa

Página de Capa

Reutilização de Página

Com o suporte a múltiplas entradas, reutilizar páginas pode ser simples. Por exemplo:

---
src: ./capa.md
---

---
src: ./intro.md
---

---
src: ./conteudo.md
---

---
# reutilização
src: ./conteudo.md
---