🗺️ A Coexistência entre Markdown Puro e Elementos HTML/SVG

flowchart TD
    DOC["Documento .md"]
    --> PARSER{"Parser Kramdown / CommonMark"}
    
    PARSER --> MD_CORE["Markdown Puro (Headers, Listas, Negrito) -> Converte para HTML padrão"]
    PARSER --> RAW_HTML["Blocos HTML5 Nativos (<details>, <summary>, <kbd>, <mark>) -> Preserva no DOM"]
    PARSER --> INLINE_SVG["Vetores SVG (<svg viewBox='...'>) -> Renderiza gráficos responsivos sem requisições HTTP"]

    style DOC fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style PARSER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style MD_CORE fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style RAW_HTML fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style INLINE_SVG fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

📖 Fundamentos e Aplicação

O Markdown foi concebido por John Gruber como um superconjunto de HTML: qualquer tag HTML válida pode ser inserida diretamente no documento. Isso expande as capacidades visuais do Markdown sem a necessidade de plugins pesados.

1. Detalhes Retráteis com <details markdown="1">

A tag nativa do HTML5 <details> e <summary> permite criar acordions de “Ver Gabarito” ou “Detalhes Avançados”. Regra de Ouro: em parsers como Kramdown (Jekyll), o atributo markdown="1" é mandatório para que os blocos de código internos sejam devidamente formatados!

<details markdown="1">
<summary>🔍 Clique para ver a solução detalhada</summary>

```python
def solucao():
    return True

</details>


### 2. Vetores SVG Puros e Inline
Desenhar diagramas personalizados, badges e ícones sem gerar requisições adicionais de imagem:
```html
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>