Slidev 101: criando apresentações com Markdown

Como defensor de desenvolvedores, faço muitas palestras para compartilhar minha experiência e ensinar outros desenvolvedores — o que significa que passo bastante tempo criando apresentações. Esse processo pode ser tedioso, especialmente quando é preciso considerar detalhes como esquema de cores, composição visual e narrativa. Depois de um tempo, quis encontrar um método que incorporasse uma boa experiência para desenvolvedores ao processo.

Felizmente, há uma maneira melhor e mais programática de montar seus slides: Slidev, o projeto de código aberto que permite programar suas apresentações.

Aplicativos de apresentação de slides versus apresentações programadas

Já criei apresentações com Keynote, Google Slides e Slides.com, e encontrei alguns desafios em cada um deles, como:

• O Keynote não é muito portátil e exige que você exporte os slides para PDF para compartilhá-los.

• O Google Slides é ótimo para edição colaborativa quando necessário, e os temas padronizados das apresentações da Snyk ajudam a evitar que o trabalho visual consuma tempo demais. No entanto, o Google Slides não tem recursos de animação de texto, que são ótimos para animar mudanças no código. Outro desafio é que você precisa estar “online” para usar o Google Slides corretamente — e todos sabemos como o Wi-Fi de conferências pode ser lento.

• O Slides.com foi criado sobre o projeto de código aberto Reveal.js, desenvolvido pelo talentoso Hakim El Hattab. Gosto desse serviço de apresentações na web pela simplicidade, mas ele não oferece temas e muitas vezes ultrapasso os limites da versão gratuita (e, às vezes, até da versão paga).

Diante disso, algumas vantagens de programar suas apresentações são:

• Ter acesso ao histórico de versões baseado em código.

• A natureza de código aberto do GitHub facilita o compartilhamento dos seus slides e a colaboração com outras pessoas.

Programe suas apresentações com o Slidev no GitHub

Antes de conhecer o Slidev em detalhes, vale mencionar que programar slides de apresentação não é uma ideia nova. Patrick Debois, também conhecido como pai do DevOps, analisou esse conceito em uma publicação no blog sobre diferentes conceitos como código. Reveal.js e MDX são exemplos de projetos que existem há bastante tempo.

Vamos começar apresentando o Slidev e seu contexto. O Slidev é um projeto de código aberto baseado em Vue.js, criado por Anthony Fu. Seu objetivo é simplificar a criação de slides usando a sintaxe Markdown como base e ampliar os recursos existentes, permitindo que as pessoas criem seus próprios componentes.

Comece iniciando um projeto Slidev em uma nova pasta:

1npm init slidev

O programa fará várias perguntas sobre o título dos slides, o nome da pasta e outros detalhes. Depois, vai criar a estrutura do projeto, com um exemplo simples de componente e um arquivo principal chamado slides.md — que contém toda a apresentação.

A estrutura de pastas e o arquivo da apresentação devem ser parecidos com isto:

Observe o conteúdo do arquivo slides.md:

• Esse arquivo Markdown contém uma configuração YAML Frontmatter que permite personalizar slides específicos ou a apresentação inteira. Ela é delimitada por caracteres --- no início e no fim.

• Cada título no arquivo Markdown usa a notação # Title heading 1 para indicar o título e o cabeçalho principal do slide. O conteúdo vem logo abaixo.

• Para personalizar ainda mais os botões e elementos visuais do slide, usamos código HTML para elementos DOM <div> e <span>.

Depois de concluir as alterações na apresentação padrão, podemos executar o projeto Slidev no modo de recarga automática com:

1npm run dev

Isso vai gerar o conteúdo automaticamente em uma página da web e servi-lo por meio de localhost:3030. Uma janela do navegador também será aberta para exibir o conteúdo, como mostrado aqui:

Para escrever o conteúdo propriamente dito, basta usar Markdown, como em um README — algo com que a maioria dos desenvolvedores já está bem familiarizada. Veja um exemplo de slide com uma lista com marcadores:

1---
2
3# What is Slidev?
4
5Slidev is a slide deck maker and presenter designed for developers, and consists of the following features
6
7- 📝 **Text-based** - focus on the content with Markdown, and then style them later
8- 🎨 **Themable** - theme can be shared and used with npm packages
9- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
10- 🤹 **Interactive** - embedding Vue components to enhance your expressions
11- 🎥 **Recording** - built-in recording and camera view
12- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
13- 🛠 **Hackable** - anything possible on a webpage
14
15<br>
16<br>
17
18Read more about [Why Slidev?](https://sli.dev/guide/why)
19
20<!--
21You can have a `style` tag in markdown to override the style for the current page.
22Learn more: https://sli.dev/guide/syntax#embedded-styles
23-->
24
25<style>
26h1 {
27  background-color: #2B90B6;
28  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
29  background-size: 100%;
30  -webkit-background-clip: text;
31  -moz-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  -moz-text-fill-color: transparent;
34}
35</style>

Vamos dividir esse trecho de código nas partes que compõem o slide:

1. O --- inicia uma nova página de slide e configura o que for necessário para ela. Neste caso, não foi preciso fazer nenhuma personalização específica do Slidev.

2. O cabeçalho Markdown # What is Slidev? define o título correspondente do slide.

3. O corpo do slide vem depois do título e é escrito como qualquer outra sintaxe de código Markdown. Observe que você pode incluir quebras de linha em HTML usando <br>, além de emojis ou links no estilo Markdown no fim do slide.

4. O bloco de comentário HTML não aparece nos slides, pois é reservado às anotações do apresentador. É uma ótima maneira de registrar suas ideias junto ao conteúdo!

5. A tag de estilo inline serve para substituir o estilo de título do tema (que usa apenas texto branco) e aplicar uma cor em gradiente.

Veja uma captura de tela de como o layout desse slide é exibido:

Quando você passa muito tempo analisando trechos de código-fonte — como eu faço ao apresentar tópicos sobre código vulnerável e boas práticas de segurança —, o realce de sintaxe é um recurso muito útil.

Veja o seguinte código do Slidev:

1---
2layout: image-right
3image: https://source.unsplash.com/collection/94734566/1920x1080
4---
5
6# Code
7
8Use code snippets and get the highlighting directly![^1]
9
10ts {all|2|1-6|9|all}
11interface User {
12  id: number
13  firstName: string
14  lastName: string
15  role: string
16}
17
18function updateUser(id: number, update: User) {
19  const user = getUser(id)
20  const newUser = { ...user, ...update }
21  saveUser(id, newUser)
22}
23
24<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">
25
26[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

Este slide começa com uma personalização específica, definida no bloco YAML --- delimitado por marcadores de abertura e fechamento. Ela configura o layout para exibir uma imagem à direita e especifica o URL dessa imagem.

Em seguida, o código define o título e o conteúdo do slide, que usa realce de sintaxe. O trecho de código reage a cliques do mouse e segue este padrão de animação:

1. Primeiro, o Slidev realça todo o bloco de código, conforme a diretiva ts {all} que abre o bloco.

2. A cada clique do mouse para avançar a animação do slide, uma parte específica do código é realçada: primeiro a linha 2, depois as linhas 1 a 6, depois a linha 9 e, por fim, tudo é realçado novamente.

3. Em seguida, o componente <arrow> é usado para apontar para uma linha de código com coordenadas x e y (o que, admito, não é muito prático). Ele é acionado especificamente no terceiro clique do mouse, conforme indicado pelo atributo v-click=”3”.

4. Por fim, o slide inclui notas de rodapé, uma ótima maneira de atribuir créditos às imagens ou indicar referências usadas ao longo da apresentação.

A captura de tela a seguir mostra esse slide em ação:

Para encerrar este guia de introdução, vale lembrar que, como o Slidev é baseado no framework Vue.js, você pode definir e usar qualquer componente Vue diretamente na sintaxe Markdown dos seus slides — inclusive os componentes oferecidos pelos temas que importar. Saiba mais sobre os componentes Vue do Slidev no guia de documentação.

Exportação, temas e outros recursos de apresentações do Slidev

Vimos como começar a usar o Slidev e o Markdown. Mas o Slidev oferece muitos outros recursos integrados que quero explorar para minhas palestras. Veja alguns dos que mais me empolgam.

Temas do Slidev e alternância entre os modos claro e escuro

Imagine passar tanto tempo criando sua apresentação e só então perceber que a iluminação do local da conferência não é a ideal. Você acaba apresentando com a frustração de saber que boa parte do conteúdo está ilegível. É complicado.

Com o Slidev, a solução é simples. O botão Alternar modo escuro na barra de ferramentas dos slides permite alternar entre os temas claro e escuro, sem preocupação com a iluminação e a legibilidade. Você precisa confirmar se o tema escolhido oferece esse recurso, mas encontrei essa opção no tema padrão do Slidev e em alguns outros que usei. É ótimo ver quem cria temas incluindo esse recurso neles.

A página de documentação Slidev Themes já reúne alguns temas selecionados, mas você também pode pesquisar no registro do npm por pacotes publicados com a tag slidev-theme para encontrar outros.

Modo de apresentação fácil com o Slidev

Outro recurso útil é um modo de apresentação que pode ser acessado por um URL específico. Ao contrário de outros aplicativos de apresentação — em que o modo de apresentação está integrado ao botão Visualização da apresentação —, com o Slidev posso abrir esse modo no navegador e consultar minhas anotações ou os próximos slides pelo link no celular ou tablet.

Exportação do Slidev ou simplesmente uma versão online da sua apresentação

Para exportar sua apresentação do Slidev para PDF ou PNG, é preciso renderizá-la com o Playwright — o que, na prática, envolve capturar a tela de um navegador sem interface gráfica.

É bem fácil e muito mais simples do que parece, mas vale entender como funciona. A página de documentação Slidev Export explica todos os detalhes, incluindo como alternar entre os modos claro e escuro nos slides e como usar animações acionadas por cliques.

No entanto, tenho pensado em compartilhar minha apresentação do Slidev seguindo estas etapas:

1. Os slides ficam hospedados em um repositório do GitHub.

2. Um processo de CI é executado a cada commit e gera um site estático, que é implantado no Vercel ou no Netlify.

3. O mesmo processo de CI também gera a exportação em PDF do Slidev como parte do build, e o GitHub Actions pode armazená-la como um artefato. No entanto, os artefatos são mantidos por apenas 90 dias, então precisamos encontrar outra solução. Uma opção seria enviar o arquivo PDF gerado para o repositório do GitHub.

Programe suas apresentações com o Slidev

É isso, pessoal! Obrigado por acompanhar minha jornada para programar apresentações com o Slidev. Espero que ela inspire você a experimentar um caminho parecido ou até a encontrar uma maneira ainda melhor de criar slides programáveis e personalizados.