Aula 07: Markdown Estendido ➕

Elevando o Nível Visual 🚀

O que vamos aprender hoje? 🎯

HTML no Markdown 🌐
Emojis e Simbologia 😎
Notas de Rodapé 📝
Formatação Científica 🔢
Equilíbrio Visual ⚖️

1. HTML no Markdown 🌐

O Markdown é amigável ao HTML.

Sintaxe básica não resolve tudo?

Chame o HTML para o resgate!

Centralizando Conteúdo 🎯

<p align="center">
  Texto Centralizado
</p>

Ideal para logos e títulos especiais.

Cores customizadas 🎨

<span style="color: blue;">Texto Azul</span>

Use com cautela para não virar um carnaval! 🍬

2. Emojis e Simbologia 😎

Comunicação visual rápida e intuitiva.

Shortcodes: :rocket:, :bulb:, :warning:.

Hierarquia com Emojis 👑

🔴 Urgente / Erro
🟡 Atenção / Info
🟢 Sucesso / Pronto

3. Notas de Rodapé 📝

Documentação acadêmica e profissional.

Referencie sem interromper o raciocínio.

Sintaxe da Nota 🔗

No texto: Afirmação[^1].

No rodapé: [^1]: Referência.

O parser cria o link de ida e volta! 🔄

4. Formatação Científica 🔢

Precisa escrever H₂O ou E = mc²?

Subscrito: <sub>2</sub>
Sobrescrito: <sup>2</sup>

5. Equilíbrio Visual ⚖️

"Menos é mais."

Markdown deve ser fácil de ler no Editor (Bruto).

Excesso de HTML "suja" o arquivo .md.

Fluxo de Renderização (Mermaid) 🧜‍♀️

mermaid graph TD A[.md + HTML] --> B(Parser MkDocs) B --> C{Detecta Tag?} C -->|Sim| D[Renderiza como HTML] C -->|Não| E[Renderiza como Texto] D --> F[Site Final] E --> F

Praticando no Terminal 🐚

$ echo "<u>Frase Sublinhada</u>" > extra.md
$ echo "H<sub>2</sub>O" >> extra.md
$ cat extra.md

Exercício Rápido 🧠

Como criar uma nota de rodapé?

A) [1] B) [^1] ✅ C) #1

Mini-Projeto 🎨

Crie seu artigo.md.

Título colorido (HTML)
Notas de rodapé explicativas
Uso de sub/sobrescrito

Resumo da Aula 📝

HTML complementa o Markdown.
Notas de rodapé para referências.
Sub/Sobrescrito para ciência.
Mantenha a legibilidade bruta.

Próxima Parada... 🚂

Aula 08 - Projeto Intermediário 🏗️

Vamos unir tudo o que aprendemos até aqui!

Obrigado! 🙏

"Detalhes transformam um documento em uma obra."

Ver Aula 08