Extra Documentação Técnica com Markdown • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 10.1 — Detalhes Retráteis com Compatibilidade Kramdown

Contexto: Construir um bloco retrátil <details> para exibir uma dica de troubleshooting garantindo a renderização correta de código Markdown em seu interior.

Requisitos de Execução:

  1. Utilizar <details markdown="1">.
  2. Adicionar o título <summary>💡 Dica de Configuração</summary>.
  3. Inserir um comando de terminal em bloco fenced no conteúdo interno.

Resultado Esperado

<details markdown="1">
<summary>💡 Dica de Configuração</summary>

```bash
export NODE_ENV=production

</details>


## 📤 Instruções de Entrega (Microsoft Teams)
1. Salve o arquivo como: `Atividade_10_1_SeuNome.md`
2. Envie na tarefa: `Atividade Cap 10 - HTML e SVG em Markdown`

<details markdown="1">
<summary>🔑 Gabarito de Código & Solução Comentada</summary>

```html
<details markdown="1">
<summary>💡 Dica de Configuração</summary>

```bash
export NODE_ENV=production

</details>

*Comentário:* O atributo `markdown="1"` instrui o Kramdown a não tratar o conteúdo da tag como HTML cru puro, parseando a sintaxe de código fenced adequadamente.
</details>

---

## 🎯 Nível 2: Prática
### Problema 10.2 — Teclas de Atalho com `<kbd>` e Texto Destacado com `<mark>`

Crie uma tabela de atalhos de teclado de terminal utilizando as tags HTML5 `<kbd>` (ex: `<kbd>Ctrl</kbd> + <kbd>C</kbd>`) e destaques amarelos com `<mark>`.

<details markdown="1">
<summary>🔑 Gabarito de Código & Solução Comentada</summary>

```markdown
| Ação | Combinação de Teclas | Efeito Visual |
| :--- | :---: | :--- |
| Interromper Processo | <kbd>Ctrl</kbd> + <kbd>C</kbd> | Envia sinal <mark>SIGINT</mark> |
| Salvar Documento | <kbd>Ctrl</kbd> + <kbd>S</kbd> | Grava buffer em disco |
| Forçar Saída | <kbd>Ctrl</kbd> + <kbd>D</kbd> | Envia marcador de <mark>EOF</mark> |

</details>

🎯 Nível 3: Integração

Problema 10.3 — Ícone SVG Inline Responsivo

Desenhe um ícone de “Check” (marca de verificação aprovada) em SVG puro responsivo com viewBox="0 0 24 24", preenchimento verde e dimensões fixas de 24x24 pixels.

🔑 Gabarito de Código & Solução Comentada 
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2e7d32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
  <polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
**Status:** Verificação de integridade aprovada com sucesso!

🎯 Nível 4: Desafio

Problema 10.4 — Sanitizador de HTML para Markdown Não Confiável em Python

Implemente uma função em Python que receba um documento Markdown contendo tags HTML mistas, removendo tags perigosas como <script>, <iframe> e atributos onclick, mas preservando tags permitidas como <details>, <summary>, <kbd> e <span>.

🔑 Gabarito de Código & Solução Comentada 
# html_markdown_sanitizer.py
import re

TAGS_PERMITIDAS = {"details", "summary", "kbd", "mark", "span", "svg", "path", "b", "i", "table", "tr", "td", "th"}

def sanitizar_html_markdown(texto_md):
    # Remove scripts e iframes
    texto_limpo = re.sub(r"<(script|iframe).*?>.*?</\1>", "", texto_md, flags=re.DOTALL | re.IGNORECASE)
    # Remove handlers de eventos JS (onclick, onerror, etc)
    texto_limpo = re.sub(r"on\w+\s*=\s*['\"].*?['\"]", "", texto_limpo, flags=re.IGNORECASE)
    return texto_limpo