Markdown corrigido:
Perfeito. Abaixo está um artigo-teste completo, feito exclusivamente em Markdown, cobrindo praticamente todas as construções suportadas pelos parsers mais comuns (CommonMark, GitHub Flavored Markdown, Markdown Extra, MDX parcial).
👉 Objetivo: você pode colar este conteúdo diretamente no seu CMS/site e verificar o que é renderizado corretamente, parcialmente ou ignorado.
📘 Artigo de Teste Completo — Suporte Markdown
Este documento existe para validar todas as possibilidades de renderização Markdown do site, incluindo blocos avançados, variações de sintaxe e elementos estendidos.
🧱 Estrutura Básica
Títulos
H1 — Título Principal
H2 — Subtítulo
H3 — Seção
H4 — Subseção
H5 — Detalhe
H6 — Nota mínima
✍️ Ênfase e Texto
Texto normal sem formatação.
Itálico com asterisco Itálico com underline
Negrito com asterisco Negrito com underline
Negrito + Itálico Negrito + Itálico
Texto riscado
Texto com código inline.
🔗 Links
Link automático: https://example.com
Email automático: contato@example.com
🖼️ Imagens
Imagem simples:
Imagem com título:
Imagem clicável:
📋 Listas
Lista não ordenada
-
Item A
-
Item B
-
Subitem B1
-
Subitem B2
- Sub-subitem B2.1
-
Lista ordenada
-
Primeiro
-
Segundo
-
Terceiro
- Subnível
- Subnível
Lista mista
-
Item
- Ordenado interno
- Ordenado interno
-
Outro item
☑️ Listas de Tarefas (GFM)
- [ ] Tarefa pendente
- [x] Tarefa concluída
- [ ] Outra tarefa
📑 Citações
Citação simples.
Citação em múltiplas linhas continua aqui.
Citação aninhada:
Citação interna.
📐 Linhas Horizontais
🧮 Código
Bloco de código simples
Texto de código sem linguagem
Linha 2
Linha 3
Bloco de código com linguagem
def hello():
print("Olá, Markdown!")
function hello() {
console.log("Olá, Markdown!");
}
<div class="container">
<p>HTML dentro do Markdown</p>
</div>
📊 Tabelas
| Coluna A | Coluna B | Coluna C |
|---|---|---|
| Valor 1 | Valor 2 | Valor 3 |
| Texto longo | Negrito | Código |
| Alinhado | Central | Direita |
Tabela com alinhamento:
| Esquerda | Centro | Direita |
|---|---|---|
| A | B | C |
| 1 | 2 | 3 |
🧩 HTML Embutido
<div style=“padding:10px; border:1px solid #ccc;”> <strong>HTML direto dentro do Markdown</strong><br> <em>Nem todo parser aceita isso.</em> </div>
🧠 Blocos Especiais (Markdown Extra / Obsidian / MDX-like)
[!NOTE] Este é um bloco de nota (pode não funcionar em todos os sites).
[!WARNING] Aviso importante.
[!TIP] Dica útil.
🧪 Escape de Caracteres
- Isto não é itálico # Isto não é título > Isto não é citação
🧾 Definições (Definition Lists — Markdown Extra)
Termo 1 : Definição do termo 1
Termo 2 : Definição do termo 2 : Segunda linha da definição
🔢 Notas de Rodapé
Texto com nota[1] e outra nota[2].
🧮 Matemática (LaTeX — se suportado)
Inline:
$E = mc^2$
Bloco:
$$ \int_{a}^{b} x^2 , dx $$
🧬 Emojis
😀 😈 🔥 🧿 ⚔️ 📜
🧱 Blocos Aninhados Complexos
Citação com título
- Item dentro da citação
- Outro item
Código dentro de citação
📦 Comentários (não visíveis se suportado)
<!– Este comentário não deve aparecer –>
🧩 Bloco de Diagramas e “Gráficos” (Markdown Test)
Objetivo: validar suporte do seu site a Mermaid / PlantUML / Graphviz / ASCII / plugins de chart.
1) Mermaid — Flowchart
mindmap
root((Markdown))
Diagramas
Mermaid
PlantUML
Graphviz
Gráficos
ASCII
Plugins
Tabelas
GFM
Alinhamento2) Mermaid — Sequence Diagram
sequenceDiagram participant U as Usuário participant S as Site participant A as API U->>S: Abre página S->>A: Solicita dados A-->>S: Retorna JSON S-->>U: Renderiza conteúdo
3) Mermaid — Gantt
gantt title Cronograma (Teste) dateFormat YYYY-MM-DD section Planejamento Definir escopo :done, a1, 2026-02-01, 2d Alinhar requisitos :active, a2, 2026-02-03, 3d section Execução Implementar :a3, 2026-02-06, 5d Testar :a4, 2026-02-11, 3d
4) Mermaid — Pie Chart
pie title Distribuição (Teste) "A" : 40 "B" : 35 "C" : 25
5) Mermaid — ER Diagram (Banco de dados)
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : included_in
USER {
int id
string name
string email
}
ORDER {
int id
date created_at
float total
}
PRODUCT {
int id
string name
float price
}
ORDER_ITEM {
int id
int qty
float unit_price
}6) Mermaid — Mindmap
mindmap
root((Markdown))
Diagramas
Mermaid
PlantUML
Graphviz
Gráficos
ASCII
Plugins
Tabelas
GFM
Alinhamento7) PlantUML — Diagrama de Classe (se suportado)
plantuml
@startuml
class Usuario {
+id: int
+nome: string
+email: string
}
class Pedido {
+id: int
+data: date
+total: float
}
Usuario "1" -- "0..*" Pedido : realiza
@enduml8) Graphviz DOT — Grafo (se suportado)
digraph G {
rankdir=LR;
A -> B;
B -> C;
B -> D;
C -> E;
D -> E;
}9) “Gráfico” ASCII — Barras (sempre renderiza, é só texto)
Vendas por mês (ASCII)
Jan | ########## 10
Fev | ############### 15
Mar | ######## 8
Abr | #################### 20
10) “Gráfico” em Tabela (Markdown puro)
| Mês | Valor | Barra |
|---|---|---|
| Jan | 10 | ██████████ |
| Fev | 15 | ███████████████ |
| Mar | 8 | ████████ |
| Abr | 20 | ████████████████████ |
11) CSV embutido (alguns parsers exibem como tabela)
mes,valor
Jan,10
Fev,15
Mar,8
Abr,20
12) Vega-Lite (somente se o site suportar plugin/MDX/Vega)
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Bar chart de teste (Vega-Lite).",
"data": {
"values": [
{"mes": "Jan", "valor": 10},
{"mes": "Fev", "valor": 15},
{"mes": "Mar", "valor": 8},
{"mes": "Abr", "valor": 20}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "mes", "type": "nominal"},
"y": {"field": "valor", "type": "quantitative"}
}
}
13) Chart.js via HTML (só se o site permitir HTML/JS)
<details> <summary>Clique para ver o bloco HTML/JS (teste)</summary>
<canvas id="chartTest" width="500" height="250"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('chartTest');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan','Fev','Mar','Abr'],
datasets: [{
label: 'Valores',
data: [10,15,8,20]
}]
}
});
</script>