Ajuda do PixelDeck

Referência da sintaxe

Tudo o que o PixelDeck entende num arquivo Markdown, com exemplos prontos para copiar. O editor visual escreve boa parte disto por você; esta página é para quando você prefere digitar, ou quer um recurso que só existe no texto.

Slides

Uma linha só com --- separa um slide do próximo. Linhas em branco em volta são opcionais, mas deixam o arquivo mais legível.

# Primeiro slide

Um parágrafo.

---

# Segundo slide

Com slide-dividers no cabeçalho, um título também começa um slide novo, sem precisar do separador:

slide-dividers: #, ##

Um slide que não tem nada entre os separadores não existe. Quando você cria um slide Em branco ou apaga todo o conteúdo de um slide no editor, o PixelDeck grava @layout content no lugar, para que ele continue sendo um slide.

O cabeçalho

As linhas chave: valor no topo do arquivo, antes do primeiro slide, valem para a apresentação inteira. Quase todas também podem ser trocadas num slide só com um comando entre colchetes, como [.autoscale: false] — veja Comandos por slide.

Uma chave que o PixelDeck não conhece continua no arquivo e gera um aviso no slide, em vez de ser apagada.

Diretivas de slide

Linhas que começam com @, em qualquer ponto do slide — normalmente no topo. São as mesmas que os campos de Layout e Detalhes do editor escrevem.

O PixelDeck também lê @endsPresentation em arquivos antigos, mas grava a forma canônica @ends-presentation.

Títulos

De # a ######, do maior para o menor, todos na cor do tema. Várias linhas # seguidas formam um título de várias linhas.

# Ideias que
# merecem o palco.

## Um subtítulo
### Um título de seção dentro do slide

Centralizar o texto no slide

Duas coisas diferentes, que costumam andar juntas:

• No meio da altura: o layout @layout center (Destaque no editor) coloca o conteúdo no centro vertical do slide.
• No meio da largura: o comando de alinhamento [.header: alignment(center)] centraliza os títulos, e [.text: alignment(center)], os parágrafos.

@layout center
[.header: alignment(center)]
[.text: alignment(center)]

# Uma frase que fica.

Dita no centro exato da tela.

Para centralizar todos os slides, escreva o alinhamento no cabeçalho, sem os colchetes e sem o ponto:

header: alignment(center)
text: alignment(center)

O mesmo comando aceita left e right.

[.header: alignment(left)]
[.text: alignment(center)]
[.list: alignment(right)]
[.quote: alignment(center)]
[.footer-style: alignment(right)]

Alinhamento, tamanho e espaçamento

Comandos de estilo ajustam um tipo de elemento sem trocar a identidade visual. A forma é [.elemento: ajuste(valor), ajuste(valor)] num slide, ou elemento: ajuste(valor) no cabeçalho. O ajuste afeta todos os elementos daquele tipo no slide. Uma declaração local substitui o valor inteiro do mesmo seletor global; as propriedades não são mescladas. Ainda não há estilo exclusivo de um bloco por essa sintaxe.

[.text: alignment(right), text-scale(1.2), line-height(8)]
[.list: bullet-character(→), bullet-indent(40)]

Texto

Para ligar um slide a outro, marque o destino com uma âncora e aponte para ela. O link continua funcionando no PDF e no HTML portátil.

<a name="conclusao"></a>
# Conclusão

---

[Pular para a conclusão](#conclusao)

Listas

- Um item
- Outro item
  - Um subitem, com dois espaços de recuo

1. Primeiro passo
2. Segundo passo

- [x] Feito
- [ ] A fazer

Com build-lists: true no cabeçalho, ou [.build-lists: true] num slide, cada avanço revela o próximo item. Veja Revelação e transições.

Citações

A última linha da citação, começando com --, vira o autor.

@layout quote

> Simplicidade é a sofisticação máxima.
> -- Leonardo da Vinci

Código

Três crases abrem e fecham o bloco; a palavra depois delas é a linguagem.

```swift
let deck = DeckParser.parse(texto)
print(deck.slides.count)
```

Para acender linhas aos poucos, ponha um ou mais comandos [.code-highlight] logo antes do bloco. Cada um é um passo da apresentação.

[.code-highlight: none]
[.code-highlight: 1]
[.code-highlight: 2-3, 5]
[.code-highlight: all]

Aceita números de linha, intervalos com hífen, listas separadas por vírgula, none (tudo apagado) e all (tudo aceso).

Tabelas

Os dois-pontos na linha de separação alinham a coluna: à esquerda, ao centro ou à direita.

| Item      | Qtd. | Preço |
|:----------|:----:|------:|
| Café      |  2   | 12,00 |
| Pão \| pão |  1   |  4,50 |

Use \| para um traço vertical dentro de uma célula.

Fórmulas

TeX entre $$. No meio de uma frase, fica em linha; sozinha numa linha, vira bloco centralizado.

A área é $$\pi r^2$$ para qualquer círculo.

$$
e^{i\pi} + 1 = 0
$$

Uma fórmula que o motor não reconhece continua legível como texto e gera aviso.

Diagramas

Um bloco de código com a linguagem mermaid vira diagrama, nas cores do tema.

```mermaid
flowchart LR
  A[Ideia] --> B[Markdown] --> C[Palco]
```

No editor visual, escolha o bloco Diagrama e comece por um dos modelos prontos. Para editar à mão, escreva qualquer diagrama Mermaid dentro do bloco. Se a sintaxe estiver inválida, o slide mostra um aviso.

Imagens

A imagem precisa estar na pasta do documento ou numa subpasta. O texto entre os colchetes guarda as opções de composição, separadas por espaço.

![](imagens/palco.jpg)
![left fit](imagens/grafico.png)
![inline 50%](imagens/logo.png)

background-image no cabeçalho, ou [.background-image: imagens/textura.png] num slide, põe a mesma imagem de fundo sem precisar repeti-la.

No editor visual, o botão Escolher imagem, vídeo ou áudio… copia o arquivo para junto do documento. Depois, edite o campo de descrição para acrescentar as opções acima.

Vídeo, áudio e YouTube

A mesma sintaxe da imagem. O tipo vem da extensão do arquivo: vídeo (mp4, mov, m4v, webm) ou áudio (mp3, m4a, wav, aac, flac…). Um endereço do YouTube vira player incorporado, e o t= do link vira o ponto de início.

![autoplay mute loop](videos/abertura.mp4)
![hide autoplay](audio/trilha.mp3)
![](https://www.youtube.com/watch?v=XXXXXXXXXXX&t=1m30s)

A mídia pausa ao sair do slide. Posição e escala funcionam como nas imagens.

Colunas

[.column] começa uma coluna. Tudo até o próximo [.column], [.end-columns], ou até o fim do slide, fica nela.

[.end-columns] encerra o grupo: o conteúdo seguinte volta à largura normal, abaixo da coluna mais alta. O texto anterior à primeira coluna também mantém a largura normal. Outra linha [.column] pode iniciar um novo grupo no mesmo slide.

# Lado a lado

[.column]
### Antes
- Lento

[.column]
### Depois
- Rápido

Documentos antigos podem usar @cols, @col e @end; o PixelDeck ainda os lê.

Rodapé e numeração

Slides ocultos não entram na numeração nem no total.

Comandos por slide

Uma linha sozinha entre colchetes, com ponto, muda uma configuração só naquele slide. Ela vence o que estiver no cabeçalho.

Transições

O valor de slide-transition, no cabeçalho ou em [.slide-transition: …] num slide, é o nome da transição, opcionalmente seguido de direção, duração em segundos e cor entre parênteses.

slide-transition: fade
slide-transition: push(vertical, 0.5)
[.slide-transition: fadeThroughColor(#000000, 0.8)]
[.slide-transition: terminal]

Direções: horizontal, vertical, left, right, top, bottom. Duração de 0 a 10 segundos. Veja Revelação e transições.

Notas do apresentador

Linhas que começam com ^ são notas: só você vê, na sua tela, durante a apresentação. Linhas seguidas continuam a mesma nota.

# Resultados

^ Lembrar de citar o número do trimestre anterior.
^ Pausa antes do gráfico.

Comentários e slides ocultos

Tudo entre <!-- e --> fica no arquivo e não aparece no slide. Um slide inteiramente comentado continua no roteiro para você editar, mas é pulado na apresentação, não conta na numeração e fica fora das exportações.

---

<!--
# Slide de reserva
Só se sobrar tempo.
-->

---