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>