Destaque

O destaque é uma sintaxe estendida do Markdown para realçar texto importante no documento. Ajuda o leitor a identificar rapidamente informação crítica e torna o conteúdo mais eficaz.

Sintaxe básica

Destaque com marcação

Na maioria das extensões, o texto destacado é envolvido por dois sinais de igual (==):

Este é um exemplo com ==texto destacado==.

Resultado:

Este é um exemplo com ==texto destacado==.

Destaque de palavras e frases

O destaque pode ser aplicado a palavras ou frases:

Em programação, ==variável== é um identificador que armazena dados.

Garante ler as ==notas e avisos importantes== no documento.

Resultado:

Em programação, ==variável== é um identificador que armazena dados.

Garante ler as ==notas e avisos importantes== no documento.

Uso avançado

Combinar com outras formatações

O destaque pode ser combinado com outras formatações Markdown:

==**negrito destacado**==

==*itálico destacado*==

==***negrito+itálico destacados***==

==`código destacado`==

==[link destacado](https://www.markdownlang.com)==

Resultado:

==negrito destacado==

==itálico destacado==

==negrito+itálico destacados==

==código destacado==

==link destacado==

Destaque de blocos

Algumas implementações permitem destacar um bloco inteiro, normalmente com contentores personalizados:

::: highlight
Este é um parágrafo destacado.

Pode ter múltiplas linhas e até listas:
- Item 1
- Item 2
- Item 3
:::

Nota: o suporte a blocos destacados varia entre processadores; o exemplo acima funciona em VitePress e afins.

Compatibilidade e variações

Suporte em diferentes plataformas

Plataforma/Ferramenta	Suporte	Sintaxe
GitHub Markdown	❌	Não suportado
GitLab Markdown	✅	==highlight==
Hugo	✅	Tag mark ou ==highlight==
VitePress	✅	==highlight==
Pandoc	✅	==highlight== ou [highlight]{.mark}
Jekyll	✅	Depende do tema/plugin
CommonMark	❌	Não suportado

Saída HTML

A maioria dos processadores converte o destaque para <mark> ou classes CSS:

<!-- Usar tag mark -->
<p>Este é um exemplo com <mark>texto destacado</mark>.</p>

<!-- Usar classe personalizada -->
<p>Este é um exemplo com <span class="highlighted">texto destacado</span>.</p>

Sintaxe alternativa

Em plataformas sem suporte, usa HTML como alternativa:

Este é um exemplo com <mark>texto destacado</mark>.

<!-- Ou com estilo inline -->
Este é um exemplo com <span style="background-color: yellow;">texto destacado</span>.

Cenários de uso

Dar ênfase em documentação

O destaque é útil para realçar pontos críticos:

# Guia de instalação

Antes de instalar, ==faz uma cópia de segurança completa dos teus dados==. O processo pode formatar a partição alvo.

Passos:
1. Descarregar o instalador
2. Executar o assistente
3. ==Selecionar a opção "Instalação personalizada"==
4. Concluir seguindo o ecrã

Resultado:

Guia de instalação

Antes de instalar, ==faz uma cópia de segurança completa dos teus dados==. O processo pode formatar a partição alvo.

Passos:

1. Descarregar o instalador
2. Executar o assistente
3. ==Selecionar a opção "Instalação personalizada"==
4. Concluir seguindo o ecrã

Materiais didáticos

O destaque é especialmente útil em materiais de ensino e treino:

## Variáveis em Python

Em Python, a atribuição usa o sinal `=`:

```python
x = 10  # atribui o valor 10 à variável x

==Python é de tipagem dinâmica; o tipo é definido na atribuição.==

Tipos comuns:

• Inteiro (int)
• Ponto flutuante (float)
• Cadeia (str)
• Booleano (bool)

### Comparação e revisão de texto

Usa destaque para evidenciar alterações/diferenças:

```markdown
## Comparação de versões

### Versão original
O servidor será mantido aos domingos às 02:00.

### Versão atualizada
O servidor será mantido aos domingos às 02:00. ==A manutenção deverá durar 2 horas.==

Resultado:

Comparação de versões

Versão original

O servidor será mantido aos domingos às 02:00.

Versão atualizada

O servidor será mantido aos domingos às 02:00. ==A manutenção deverá durar 2 horas.==

Citações e notas

O destaque pode marcar trechos importantes numa citação:

> "Este é um texto citado, ==esta parte é especialmente importante== e merece atenção."
> 
> — Autor conhecido

Resultado:

"Este é um texto citado, ==esta parte é especialmente importante== e merece atenção."

— Autor conhecido

Personalização de estilo

Em ambientes com CSS personalizado, podes ajustar o estilo do destaque:

/* Estilo de destaque personalizado */
mark, .highlighted {
  background-color: #ffeb3b;  /* fundo amarelo */
  color: #000;                /* texto preto */
  padding: 0 3px;            /* padding */
  border-radius: 3px;        /* cantos arredondados */
}

/* Diferentes tipos de destaque */
.highlight-warning {
  background-color: #ffcdd2;  /* destaque de aviso (vermelho) */
}

.highlight-success {
  background-color: #c8e6c9;  /* destaque de sucesso (verde) */
}

Usar estilos personalizados:

Isto é um <mark class="highlight-warning">aviso</mark> e isto é uma <mark class="highlight-success">mensagem de sucesso</mark>.

Boas práticas

Recomendações

✅ Boas práticas:

1. **Usa destaque com moderação**:
   - Realça apenas o realmente importante
   - Excesso de destaque reduz o efeito
   
2. **Mantém consistência**:
   - Mantém um estilo consistente ao longo do documento
   - Para tipos de conteúdo, podes usar estilos distintos
   
3. **Considera o contexto**:
   - Garante relação lógica com o texto envolvente
   - Adiciona notas breves, se necessário

❌ Evitar:

1. Destacar parágrafos longos ou secções inteiras
2. Excesso de destaque numa única página
3. Destacar conteúdo pouco relevante
4. Usar muitas cores/estilos diferentes

Acessibilidade

O destaque pode dificultar a leitura para alguns utilizadores. Considera:

1. Contraste suficiente entre cor de destaque e fundo
2. Não depender só da cor para transmitir informação
3. Adicionar marcadores extra (ícones/títulos) quando útil
4. Testar em diferentes modos (ex.: modo escuro)

Resolução de problemas

Destaque não aparece

Se o destaque não aparece:

1. Verifica se a plataforma suporta ==
2. Tenta usar <mark> como alternativa
3. Garante que não há espaços entre == e o texto
4. Confirma o CSS correto

Conflitos com outras formatações

O destaque pode conflitar com outras marcações:

<!-- Pode falhar -->
==**Conteúdo com [formatação](https://www.markdownlang.com) complexa**==

<!-- Alternativa mais segura -->
<mark>**Conteúdo com [formatação](https://www.markdownlang.com) complexa**</mark>

Problemas com blocos destacados

Para destacar blocos inteiros, usa HTML ou contentores personalizados:

<!-- Usar HTML -->
<div class="highlighted-block">

# Secção importante

Este é um bloco que precisa de destaque integral.

</div>

<!-- Ou contentor personalizado (quando suportado) -->
::: highlight
# Secção importante

Este é um bloco que precisa de destaque integral.
:::

Sintaxe relacionada

• Ênfase - negrito/itálico
• Citações - blockquote
• HTML - usar HTML no Markdown

Ferramentas e plugins

• markdown-it-mark: adiciona suporte de destaque ao markdown-it
• remark-highlight.js: realce de sintaxe para código
• gatsby-remark-highlight-code: plugin de realce de código no Gatsby

Resumo

O destaque é uma extensão eficaz para melhorar a legibilidade e a visibilidade de informação crítica. Embora nem todos os processadores suportem nativamente, com HTML e CSS personalizados é possível obter efeito semelhante em quase qualquer ambiente. O uso ponderado de destaque ajuda o leitor a localizar rapidamente o essencial e melhora a experiência de leitura.