title: Uso avançado de Markdown description: Técnicas avançadas e contornos: controlo de layout, estilos, conteúdos embutidos e mais para ultrapassar limites da sintaxe.

Uso avançado de Markdown

Quando a sintaxe básica/estendida não basta, recorremos a técnicas avançadas e contornos. Esta secção mostra como ultrapassar limites e obter formatos e funcionalidades mais ricas.

O que é “uso avançado”?

São abordagens criativas para atingir efeitos de formatação sob as restrições do Markdown. Normalmente envolvem:

• HTML embutido
• Combinações de elementos de sintaxe
• Extensões específicas de plataforma
• Ferramentas e plugins de terceiros

Principais cenários

Controlo de layout

• Alinhamento de texto
• Várias colunas
• Texto com imagem
• Ajuste de espaçamentos

Estilos

• Cores
• Fontes
• Tamanhos
• Efeitos

Conteúdos avançados

• Fórmulas matemáticas
• Diagramas/gráficos
• Elementos interativos
• Média embutida

HTML para reforço

Tags HTML básicas

Muitos processadores suportam HTML inline:

<div style="text-align: center;">
  <strong style="color: red;">Texto em negrito vermelho centralizado</strong>
</div>

<img src="image.jpg" width="300" height="200" alt="Imagem com tamanho especificado">

<table border="1">
  <tr>
    <td style="background-color: #f0f0f0;">Tabela com estilo personalizado</td>
  </tr>
</table>

Controlo de estilos

Usa CSS inline para controlo fino:

<p style="color: blue; font-size: 18px; text-align: center;">
  Parágrafo azul, 18 pixels, centralizado
</p>

<div style="border: 2px solid #333; padding: 10px; border-radius: 5px;">
  Área de conteúdo com borda
</div>

Imagens — opções avançadas

Alinhamento

<!-- Alinhar à esquerda -->
<img src="image.jpg" align="left" width="200">

<!-- Alinhar à direita -->
<img src="image.jpg" align="right" width="200">

<!-- Alinhar ao centro -->
<div align="center">
  <img src="image.jpg" width="300">
</div>

Tamanho

<!-- Largura e altura fixas -->
<img src="image.jpg" width="300" height="200">

<!-- Imagem responsiva -->
<img src="image.jpg" style="max-width: 100%; height: auto;">

<!-- Imagem com borda -->
<img src="image.jpg" style="border: 2px solid #ddd; border-radius: 8px;">

Texto + imagem

<div style="display: flex; align-items: center;">
  <img src="avatar.jpg" width="80" height="80" style="margin-right: 15px;">
  <div>
    <h3 style="margin: 0;">Nome de utilizador</h3>
    <p style="margin: 5px 0;">Aqui está o texto de apresentação do utilizador...</p>
  </div>
</div>

Tabelas — reforços

Estilo

<table style="border-collapse: collapse; width: 100%;">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px;">Título da coluna 1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Título da coluna 2</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ddd; padding: 8px;">Dados 1</td>
      <td style="border: 1px solid #ddd; padding: 8px;">Dados 2</td>
    </tr>
  </tbody>
</table>

Estruturas complexas

<table>
  <tr>
    <td rowspan="2">Mesclar linhas</td>
    <td>Célula normal</td>
  </tr>
  <tr>
    <td>Célula normal</td>
  </tr>
  <tr>
    <td colspan="2">Mesclar colunas</td>
  </tr>
</table>

Fórmulas matemáticas

Sintaxe LaTeX

Muitas plataformas suportam fórmulas em LaTeX:

Fórmula inline: $E = mc^2$

Fórmula em bloco:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Matriz:
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

MathJax

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Diagramas e gráficos

Mermaid

graph TD
    A[Início] --> B{Decisão}
    B -->|Sim| C[Executar ação A]
    B -->|Não| D[Executar ação B]
    C --> E[Fim]
    D --> E

Gantt

gantt
    title Plano do projeto
    dateFormat  YYYY-MM-DD
    section Design
    Análise de requisitos      :done,    des1, 2023-01-01,2023-01-15
    Design UI       :active,  des2, 2023-01-16, 3d
    section Desenvolvimento
    Frontend     :         dev1, after des2, 20d
    Backend     :         dev2, after des2, 25d

Elementos interativos

Conteúdo recolhível

<details>
  <summary>Clique para expandir</summary>
  <p>Este é o conteúdo recolhido...</p>
</details>

Barra de progresso

<progress value="70" max="100">70%</progress>

Botões

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px;">
  Clicar no botão
</button>

Truques de layout

Layout em colunas

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div>
    <h3>Conteúdo da coluna esquerda</h3>
    <p>Este é o conteúdo da coluna esquerda...</p>
  </div>
  <div>
    <h3>Conteúdo da coluna direita</h3>
    <p>Este é o conteúdo da coluna direita...</p>
  </div>
</div>

Cartões (cards)

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h3 style="margin-top: 0;">Título do cartão</h3>
  <p>Descrição do conteúdo do cartão...</p>
  <a href="#" style="color: #007bff; text-decoration: none;">Saber mais</a>
</div>

Funcionalidades por plataforma

GitHub

<!-- Lista de tarefas -->
- [x] Tarefa concluída
- [ ] Tarefa não concluída

<!-- Mencionar utilizador -->
@username

<!-- Referenciar issue -->
#123

<!-- Diferença de código -->
```diff
- Linha removida
+ Linha adicionada

### GitLab

```markdown
<!-- Incorporar vídeo -->
![video](video.mp4)

<!-- Incorporar áudio -->
![audio](audio.mp3)

Boas práticas

Compatibilidade

• Testa em várias plataformas
• Fornece degradação aceitável
• Prefere sintaxe padrão

Desempenho

• Evita CSS inline em excesso
• Centraliza estilos em CSS externo
• Comprime imagens e média

Manutenibilidade

• Código simples e legível
• Comentários quando necessários
• Controlo de versões para a documentação

Ferramentas e recursos

Editores

• Typora - WYSIWYG
• Obsidian - Gestão de conhecimento
• Mark Text - Pré‑visualização

Ferramentas online

• Markdown Tables Generator
• Mermaid Live Editor
• Editor de fórmulas LaTeX

Referências

• CommonMark Spec
• GitHub Flavored Markdown
• Markdown Guide

Para continuar

• HTML embutido
• Fórmulas matemáticas
• Diagramas
• Boas práticas