🌐 Cap 10: HTML Semântico e Vetores SVG em Markdown - Exemplos Práticos
Demonstrações práticas de extensões web integradas ao Markdown: accordions colapsáveis, tags de teclado e ícones SVG inline.
📄 Exemplo 1: Accordion Retrátil com Código Formatado
<details markdown="1">
<summary><b>🔑 Ver Implementação de Validação de Token</b></summary>
```python
import hmac
import hashlib
def validar_assinatura(payload: bytes, segredo: bytes, assinatura_esperada: str) -> bool:
calculada = hmac.new(segredo, payload, hashlib.sha256).hexdigest()
return hmac.compare_digest(calculada, assinatura_esperada)
</details>
### Renderização Direta no Navegador:
<details markdown="1">
<summary><b>🔑 Ver Implementação de Validação de Token</b></summary>
```python
import hmac
import hashlib
def validar_assinatura(payload: bytes, segredo: bytes, assinatura_esperada: str) -> bool:
calculada = hmac.new(segredo, payload, hashlib.sha256).hexdigest()
return hmac.compare_digest(calculada, assinatura_esperada)
</details>
📄 Exemplo 2: Badge Vetorial SVG Puro (Zero Dependências)
<div style="display: flex; align-items: center; gap: 8px; padding: 12px; background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 4px; margin: 16px 0;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#2e7d32">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<span style="color: #1b5e20; font-weight: 500;">
Build de Documentação Concluído com 100% de Sucesso no GitHub Actions!
</span>
</div>