🎨 Demo Completo: Marp Recursos Nativos

📋 Tudo que funciona SEM plugins ou configurações extras

Demonstração prática de todos os recursos suportados

🎯 Índice de Recursos Demonstrados

📝 Formatação de Texto

Headers (H1, H2, H3, H4, H5, H6)
Bold, Italic, ~~Strikethrough~~
Inline code, Links, Quotes

📊 Estruturas de Dados

Listas ordenadas e não-ordenadas
Tabelas básicas e avançadas
Footnotes¹

🎨 Visual e Layout

Emojis nativos, CSS customizado
Background, Grids, Classes especiais

📝 Formatação de Texto Completa

Headers em Todos os Níveis:

H1 - Título Principal

H2 - Seção

H3 - Subseção

H4 - Tópico

H5 - Subtópico

H6 - Detalhe

Formatação Inline:

Texto em negrito e também funciona
Texto em itálico e também funciona
~~Texto riscado~~
Código inline com destaque
Link funcional
Texto normal com combinações aninhadas

📋 Listas e Estruturas

✅ Lista Não-Ordenada:

🎯 Item principal
- 📌 Subitem nível 2
  - 🔸 Subitem nível 3
    - 💡 Subitem nível 4
⚡ Outro item principal
🚀 Item com emoji nativo

🔢 Lista Ordenada:

📋 Primeiro passo
1. 🔍 Subpasso A
2. ⚙️ Subpasso B
📊 Segunda etapa
🎉 Conclusão

☑️ Task Lists:

✅ Tarefa concluída
🎯 Meta atingida
⏳ Pendente
🔄 Em progresso

📊 Tabelas Avançadas

🎯 Tabela Básica:

Nome	Idade	Profissão
João	25	Dev Frontend
Maria	30	Dev Backend
Pedro	28	DevOps

📈 Tabela com Alinhamento:

| Item | Preço | Disponibilidade | Status | | :------- | ----------: | | | | Notebook | R $2.500, 00∣ E m E s t o q u e ∣✅∣∣ M o u se ∣ R$ 45,90 | Baixo Estoque | ⚠️ | | Teclado | R$ 120,00 | Esgotado | ❌ |

💻 Code Blocks - Syntax Highlighting

☕ Java:

public class Conversor {
    private static final double TAXA_USD_BRL = 5.0;
 
    public double converter(double valorDolar) {
        if (valorDolar < 0) {
            throw new IllegalArgumentException("Valor inválido");
        }
        return valorDolar * TAXA_USD_BRL;
    }
}

🐍 Python:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
 
# Uso
print(f"Fibonacci de 10: {fibonacci(10)}")

🖥️ Mais Linguagens de Programação

🌐 JavaScript:

const calcularMedia = (notas) => {
  const soma = notas.reduce((acc, nota) => acc + nota, 0);
  return soma / notas.length;
};
 
console.log(calcularMedia([8.5, 7.0, 9.2])); // 8.23

🔧 JSON:

{
  "aluno": {
    "nome": "João Silva",
    "idade": 20,
    "notas": [8.5, 7.0, 9.2],
    "aprovado": true
  }
}

🐧 Bash:

#!/bin/bash
echo "Executando testes..."
mvn clean test
echo "Testes concluídos!"

🎨 CSS Customizado - Callouts

⚠️ Aviso Importante

Esta é uma caixa de aviso criada com CSS customizado. Funciona perfeitamente no Marp!

✅ Sucesso!

Esta é uma caixa de sucesso usando apenas CSS nativo do Marp.

💡 Dica:

Esta é uma citação tradicional do Markdown. Funciona perfeitamente no Marp para destacar informações importantes.

— Autor da Citação

🎭 Emojis Nativos Completos

😀 Rostos e Pessoas:

😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳

💼 Trabalho e Tecnologia:

💻 🖥️ ⌨️ 🖱️ 🖨️ 💾 💿 📱 ☎️ 📞 📟 📠 📺 📻 🎚️ ⏱️ ⏰ 🕰️ 📡 🔋 🔌 💡 🔦 🕯️

🔢 Números e Símbolos:

1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔂 🔁 🔀 ⏯️ ⏭️ ⏮️ ⏸️ ⏹️ ⏺️ 💿 💽

🎯 Status e Indicadores:

✅ ❌ ⚠️ 🚫 💯 💢 💥 💫 💦 💨 🕳️ 💬 👍 👎 👌 🤞 ✌️ 🤟 🤘 👏

📐 Layout e Grids

📊 Coluna Esquerda

Lista de items
Texto explanativo
Informações técnicas
Código demonstrativo

🎯 Coluna Direita

Resultados
Gráficos conceituais
Exemplos práticos
Output esperado

📐 Split Screen Manual

🔍 Antes (Problema):

// Código sem testes
public class App {
    public static void main(String[] args) {
        System.out.println("Olá mundo!");
        // Como sei se funciona?
    }
}

❌ Sem garantias
❌ Sem documentação
❌ Medo de mudanças

✨ Depois (Solução):

@Test
void deveImprimirOlaMundo() {
    App app = new App();
    String resultado = app.saudar();
    assertEquals("Olá mundo!", resultado);
}

✅ Comportamento garantido
✅ Documentação viva
✅ Refactor seguro

🎨 Buttons e Elementos Visuais

🎮 Elementos Interativos Visuais:

▶️ Executar Código 🧪 Rodar Testes 📊 Ver Relatório

📋 Indicadores de Status:

🟢 PASSOU | 🔴 FALHOU | 🟡 PENDENTE | ⚪ IGNORADO

🎯 Progress Visual:

████████████████████░░ 90% Concluído

📈 Barras de Progresso CSS:

75% Cobertura de Testes

🖼️ Suporte a Imagens

📸 Formatos Suportados Nativamente:

Raster Images:

✅ PNG - Melhor para screenshots, diagramas
✅ JPG/JPEG - Fotos, imagens reais
✅ GIF - Animações simples
✅ WebP - Formato moderno

Vector Images:

✅ SVG - Ideal para ícones, logotipos, diagramas

🎯 Exemplo de Uso:

![Logo](./logo.png)
![Diagrama TDD](./tdd-cycle.svg "Ciclo TDD")

Nota: Como esta é uma demo, não incluí imagens reais para evitar dependências de arquivos externos.

📝 Footnotes e Referências

📚 Texto com Referências:

O Test-Driven Development¹ é uma metodologia que revolucionou a programação moderna². Empresas como Google³ e Microsoft⁴ adotaram essa prática em larga escala.

📖 Referências:

¹ Test-Driven Development by Kent Beck (2002)
² Clean Code: A Handbook of Agile Software Craftsmanship
³ Google Testing Blog - testing.googleblog.com
⁴ Microsoft DevBlog - devblogs.microsoft.com

⚙️ Classes Especiais e Background

🎨 Classes CSS Disponíveis:

<!-- _class: title -->
 
# Slide de Título
 
<!-- _class: lead -->
 
# Slide de Destaque
 
<!-- _backgroundColor: "#1e3a8a" -->
 
# Slide com Background Azul

🌈 Background Customizados:

backgroundColor: "#hex_color"
backgroundImage: "url()"
backgroundSize: cover
backgroundPosition: center

🌟 Slide com Background Personalizado

Este slide demonstra:

✨ Background colorido (#1e3a8a)
💫 Texto em branco (#ffffff)
🎯 Contraste perfeito para apresentações
🎨 CSS totalmente customizável

💡 Dica de ouro:

Você pode usar qualquer cor hexadecimal ou RGB para personalizar completamente a aparência dos seus slides!

📏 Headers e Footers Globais

🔝 Header Configurado:

header: "**Demo Marp** - Recursos Nativos"

footer: "Página **{pageNo}** de **{totalPages}**"

📄 Paginação Automática:

paginate: true

🎯 Variáveis Disponíveis:

{pageNo} - Número da página atual
{totalPages} - Total de páginas
{title} - Título do slide atual

🎉 Recursos Completos Demonstrados!

✅ O que vimos:

📝 Texto:

Headers H1-H6
Bold, Italic, Strike
Inline code, Links
Quotes tradicionais

📊 Estrutura:

Listas ordenadas/não-ordenadas
Task lists com checkboxes
Tabelas com alinhamento
Footnotes¹ numeradas

💻 Código:

Syntax highlighting
Java, Python, JS, JSON, Bash
Inline e block code
Formatação automática

🎨 Visual:

Emojis nativos 🎯
CSS completamente customizável
Grids e flexbox
Backgrounds e cores

🚀 Conclusão: Marp é Poderoso!

💪 Com recursos nativos você pode criar:

✅ Apresentações profissionais completas
✅ Layouts responsivos e flexíveis
✅ Código perfeitamente destacado
✅ Visual atrativo e moderno

🎯 Perfeito para:

👨‍🏫 Aulas técnicas (como TDD em Java)
👨‍💼 Apresentações corporativas
🎓 Material educacional
📊 Demos de código

🔗 Próximo passo:

Use este template como base para suas apresentações!

¹ Esta é uma demonstração de footnote funcional no Marp

Explorador

marp-demo-recursos-nativos