📊 Cap 10: HTML Semântico & SVG em Markdown

Docs-as-Code • Recursos Nativos da Web e Design Responsivo

🗺️ O Princípio do Superconjunto Web

flowchart LR
    MD["Markdown Básico (*, #, [])"]
    --> EXTEND["HTML5 Puro (<details>, <kbd>, <mark>)"]
    EXTEND --> GRAPH["Vetores SVG (<svg viewBox='...'>)"]
    GRAPH --> RENDER["Página Técnica Rica sem Dependências Externas! ⚡"]

    style MD fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style EXTEND fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style GRAPH fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style RENDER fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

🎯 Slide 1: Por Que Usar HTML dentro do Markdown?

• O Markdown foi concebido como um superconjunto de HTML.

• Quando a sintaxe do Markdown é insuficiente (como para criar accordions, tabelas com células mescladas ou teclas de atalho), o HTML entra sem quebrar o documento!

🎯 Slide 2: A Regra de Ouro do Kramdown (markdown="1")

• Parsers estritos tratam tags HTML como blocos isolados.

• Para que cabeçalhos e blocos de código Markdown funcionem DENTRO de uma tag HTML:
  • Adicione o atributo markdown="1" na tag de abertura: ```html

# Código processado normalmente!

```

🎯 Slide 3: Vetores SVG Inline Responsivos

• Imagens PNG pesam e perdem nitidez em telas de alta densidade (Retina/4K).

• SVGs inline:
  • Carregam com zero requisições HTTP adicionais.
  • São renderizados matematicamente em qualquer escala.
  • Podem herdar as cores do tema via CSS (currentColor)!