Escreva o melhor markdown que você ja fez com esses 5 snippets
Tags: beginners, braziliandevs, programming, tutorial
Published: 2023-10-18 03:51:25


## Sumário
- [Âncora interativa](#ancora)
- [Compatibilidade de navegador](#compat)
- [Imagem de destaque](#highlight)
- [Accordion nativo](#accordion)
- [Callout centralizado](#callout)
- [Ícones grátis](#icons)


<br />

------

</br>

## Âncora interativa <a id="ancora" href="#ancora">&#128279;</a>
Alguns elementos HTML possuem suporte no Markdown, um deles é a âncora `<a>`. Além de conteúdo em outras páginas, com ela é possível referenciar trechos na própria página. Quando criamos headings no markdown, [eles já criam âncoras automaticamente](https://gerrit.googlesource.com/gitiles/+/refs/tags/v0.1-11/Documentation/markdown.md#named-anchors), mas a vantagem de se usar um link é que clicando no ícone é possível colocar o _fragment_ na URL diretamente pelo heading.

&nbsp;

🧐 **Exemplo**

## :active <a id="active" href="#active">&#128279;</a>

&nbsp;

{% spoiler 📝 **Código fonte** %}

```html
## :active <a id="active" href="#active">&#128279;</a>
```

{% endspoiler %}

<br />

------

</br>

## Compatibilidade de navegador <a id="compat" href="#compat">&#128279;</a>
Roubei esse componente do [curso de CSS do web.dev](https://web.dev/learn/css/pseudo-classes?hl=pt) e é uma ótima forma de mostrar suporte de navegador nas suas documentações. Infelizmente o devTo não reconhece essa sintaxe, mas o Github e o VSCode sim!

&nbsp;

🧐 **Exemplo (Não funciona aqui no devTo)**

![Tabela de compatibilidade de navegadores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6s2w5kso3km0evcjxb8l.png)

{% spoiler 📝 **Código fonte** %}

```html
<span>
  Compatibilidade com navegadores
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> 1
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> 12
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> 1
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> 1
</span>
```

{% endspoiler %}

&nbsp;

🧐 **Exemplo (Esse funciona!)**

| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> |
| --- | --- | --- | --- |
| 1 | 12 | 3 | 1 |

{% spoiler 📝 **Código fonte** %}

```html
| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> |
| --- | --- | --- | --- |
| 1 | 12 | 3 | 1 |
```

{% endspoiler %}

<br />

------

</br>

## Imagem de destaque <a id="highlight" href="#highlight">&#128279;</a>

Usar o elemento `<figure>` e `<figcaption>` trazem um resultado bem parecido com as imagens nos posts do Medium. O `<figcaption>` descreve a imagem e usar a própria tag `<img>` permite que a gente altere as propriedades `height` e `width`, dando maior controle de direção de arte pro markdown.

&nbsp;

🧐 **Exemplo**

<figure> 
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmtdzk3zfsdvafrdc7wn.png" alt="Icone cartum de uma pessoa" />

  <figcaption>C# e Código, do Twitter</figcaption>
</figure>

&nbsp;

{% spoiler 📝 **Código fonte** %}

```html
<figure> 
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmtdzk3zfsdvafrdc7wn.png" alt="Icone cartum de uma pessoa" />

  <figcaption>C# e Código, do Twitter</figcaption>
</figure>
```

{% endspoiler %}

<br />

------

</br>

## Accordion nativo <a id="accordion" href="#accordion">&#128279;</a>

Perfeito pra quando você quer esconder partes longas como sessão de curiosidades, código fonte, etc.

&nbsp;

🧐 **Exemplo**

{% spoiler 📝 **Spoiler?** %}

> Ih, olha o ganso

{% endspoiler %}

&nbsp;

{% spoiler 📝 **Código fonte** %}

```html
<details>
  <summary>Spoiler?</summary>
  
  > Ih, olha o ganso 

</details>
```

{% endspoiler %}

&nbsp;

Especificamente no caso do DevTo, usamos:

```md
{% details summary %} content {% enddetails %}
{% spoiler summary %} content {% endspoiler %}
{% collapsible summary %} content {% endcollapsible %}
```

<br />

------

</br>

## Callout centralizado <a id="callout" href="#callout">&#128279;</a>

Infelizmente o DevTo é alérgico a `<div>`, mas no Github e na maioria dos leitores de Markdown funciona que é uma beleza. Perfeito pra aquela seção que precisa de atenção ou direciona pra algum lugar.

&nbsp;

🧐 **Exemplo**

![Frase centralizada com link indicando a próxima página](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh2plzaigh9io8mz2p5l.png)

&nbsp;

{% spoiler 📝 **Código fonte** %}

```html
<div align="center">
  **Próxima página &rarr; [Pseudo-classes](./2-pseudo-classes.md)**
</div>
```

{% endspoiler %}


<br />

------

</br>

## Ícones grátis <a id="icons" href="#icons">&#128279;</a>

[Tem uma lista giroscópica de ícones de HTML](https://www.toptal.com/designers/htmlarrows/symbols/) (só nesse artigo eu usei 2), bastando copiar e colar!

Temos os mais básicos como setas &rarr; (`&rarr;`) e &larr; (`&larr;`), e outros mais específicos como &#9773; (`&#9773;`). Como emojis tomam mais espaço vertical causando uma quebra de linha ✋ maior, esse ícones são uma boa solução pra quando você precisa só adicionar um élan na sua documentação.

&nbsp;

🧐 **Exemplo**

> &#10077; O erro é o que está errado &#10078;
> &emsp; &emsp; - _Charles Darwin_

&nbsp;

{% spoiler 📝 **Código fonte** %}

```html
> &#10077; O erro é o que está errado &#10078;
> &emsp; &emsp; - _Charles Darwin_
```

{% endspoiler %}

&nbsp;

Há também como usar caracteres especiais de espaçamento pra criar espaços customizados, quase como o Tailwind do markdown. No elemento abaixo o pipe |  sinaliza o começo e o fim do espaçamento.

| &thinsp; | - `&thinsp;`
| &nbsp; | - `&nbsp;`
| &nbsp; | - `&nbsp;`
| &emsp; | - `&emsp;`

<br />

------

</br>

E ai, aprendeu alguma coisa nova? Algum que você não conhecia? Comentem ai seus hacks de Markdown pra compartilhar com a galera!