Aprendendo a utilizar o formatador de textos Markdown

O Markdown basicamente é uma linguagem de marcação utilizada para a construção de textos simples, muito utilizada para a criação de documentações de projetos, por exemplo os famosos README.md que aparecem ao acessar os repositórios do Github.

Com o markdown é possível criar títulos, listas, tabelas, blocos de códigos e outras funções, tudo de forma padronizada. Além disso, caso as opções padrões do Markdown não sejam suficientes, também é possível utilizar tags HTML para aprimorar o texto.

Foi criado por John Gruber em 2004 e até hoje é a uma das linguagens de marcação mais utilizadas. O Markdown é uma sintaxe de formatação de texto simples e também uma ferramenta de software, escrita em Perl, que converte a formatação de texto em HTML.

Funcionalidades do markdown

A seguir é apresentado as principais funcionalidades do markdown. É apresentado primeiramente a sintaxe do markdown e, em seguida, o resultado obtido ao visualizar.

Textos

Textos são escritos de maneira muito simples, como apresentado abaixo, um detalhe importante ao utilizar o markdown é que para separar um parágrafo de outro deve haver uma linha em branco entre os textos, apenas a quebra de linha não é suficiente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Títulos

Os títulos são divididos em 6 níveis construídos da seguinte maneira:

# Título nível 01

## Título nível 02

### Título nível 03

#### Título nível 04

##### Título nível 05

###### Título nível 06

Destaques no texto

Utilize dois asteriscos no texto para destacar em negrito palavras e frases.

Exemplo de palavra em **negrito**.

Exemplo de palavra em <b>negrito</b> utilizando tag HTML.

Utilize um asterisco no texto para destacar em itálico palavras e frases.

Exemplo de palavra em *itálico*.

Exemplo de palavra em <i>itálico</i> utilizando tag HTML.

Utilize três asteriscos no texto para destacar em negrito e itálico palavras e frases.

Exemplo de palavras em ***negrito e itálico***.

Exemplo de palavra que não está em \*\*negrito\*\*.

Exemplo de palavra que não está em \*itálico\*.

Também é possível riscar/tachar textos utilizando o caracter ~ (til).

Exemplo de texto ~~riscado / tachado~~.

Exemplo de texto <s>riscado / tachado</s> utilizando tag HTML.

Caso seja necessário adicionar uma separação entre um texto e outro, isso é possível utilizando o caracter - (hífen), como apresentado a seguir.

Texto 01.

---

Texto 02.

Listas

Para criar listas sem numeração os seguintes caracteres podem ser utilizados * (asteriscos), + (sinais de adição) e - (hífens).

* Primeira etapa
* Segunda etapa
* Terceira etapa

Para a criação de uma lista numerada, as seguintes sintaxes podem ser utilizadas:

1. Primeira etapa
1. Segunda etapa
1. Terceira etapa

1. Primeira etapa
2. Segunda etapa
3. Terceira etapa

Também é possível encadear listas, como visualizado no exemplo abaixo.

1. Primeira etapa
    1. Processo 01
    1. Processo 02
    1. Processo 03
2. Segunda etapa
3. Terceira etapa
    * Opção 01
    * Opção 02
    * Opção 03

Links

Para a criação de links, utilize entre colchetes o texto do link e entre parênteses a URL.

Link: [Blog Schulz](https://schulz.net.br/blog).

Também é possível criar links com tooltip ao passar o mouse.

Link: [Blog Schulz](https://schulz.net.br/blog "Blog do site schulz.net.br :)").

Caso seja necessário apresentar a URL diretamente no texto insira o link com os caracteres < e >.

Link: <https://schulz.net.br/blog>

Imagens

A sintaxe para a adição de imagens no texto é semelhante à sintaxe de links, basicamente é inserido entre colchetes o texto alternativo da imagem e entre parênteses a URL ou diretório da imagem.

![Alt Text](../icons/favicon-128x128.png)

![Alt Text](https://schulz.net.br/icons/favicon-128x128.png)

Assim como os links, é possível inserir um título para a imagem, que aparece ao passar o mouse.

![Alt Text](../icons/favicon-128x128.png "Título da imagem")

Tabelas

Markdown também permite a criação de tabelas, por meio dos caracteres | (pipe) e - (hífen), utilizando a sintaxe apresentada abaixo.

| Título 01 | Título 02 | Título 03 |
|-----------|-----------|-----------|
| L01 C01   | L01 C02   | L01 C03   |
| L02 C01   | L02 C02   | L02 C03   |
| L03 C01   | L03 C02   | L03 C03   |
| L04 C01   | L04 C02   | L04 C03   |

Além da construção das tabelas, é possível adicionar alinhamento nas colunas, da seguinte forma:

• :-- > Determina que a coluna deve ser alinhada à esquerda
• --: > Determina que a coluna deve ser alinhada à direita
• :-: > Determina que a coluna deve ser alinhada ao centro

Obs: Lembrando também que não é obrigatório as células possuírem o mesmo tamanho.

| Produto | Quantidade em Estoque | Valor de Custo |
| :-- | :-: | --: |
| Bloco de notas post-it | 31 | R$ 7,64 |
| Caneta | 135 | R$ 6,02 |
| Agenda Executiva Espiral | 18 | R$ 77,50 |
| Mochila Rolante | 7 | R$ 231,75 |
| Estojo Triplo | 14 | R$ 57,06 |

Blocos de Código

Markdown permite a inserção de blocos de código, para inserir um bloco de código de uma linha apenas é necessário inserir o trecho de código iniciado e terminado com o caracter ` (crase). Como apresentado no exemplo a seguir.

Linha de código na `mesma linha`.

Também é possível inserir blocos de código que possuem mais de uma linha e com formatação de acordo com o tipo de código. Por exemplo, o trecho de código abaixo representa um código HTML.

‎`‎`‎`html
<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página HTML</title>
    <meta name="description" content="Descrição da página" />
  </head>
  <body>
    <h1>Bem vindo ao site!</h1>
    <br />
    <p>Volte sempre</p>
  </body>
</html>
‎`‎`‎`

<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página HTML</title>
    <meta name="description" content="Descrição da página" />
  </head>
  <body>
    <h1>Bem vindo ao site!</h1>
    <br />
    <p>Volte sempre</p>
  </body>
</html>

Blocos de Citação

Para inserir blocos de citação / blockquotes no Markdown, apenas é necessário inserir o caracter > (maior que) e em seguida adicionar o texto desejado.

> Essa é uma citação de apenas uma linha

Caso seja necessário inserir mais de um parágrafo na mesma citação, apenas é necessário adicionar uma linha em branco entre os dois parágrafos. Lembrando que todas as linhas devem iniciar com o caracter > (maior que).

> Essa é uma citação com parágrafos
>
> Segundo parágrafo do bloco de citação

Para adicionar blocos de citação aninhados, ou seja, um bloco de citação dentro de outro, apenas é necessário adicionar mais um caracter > (maior que) antes do início do bloco de citação aninhado, como mostrado a seguir.

> Blockquotes aninhados
>
>> Essa é uma citação aninhada

Outra possibilidade é a criação de blocos de citação que possuem outros elementos do markdown, como apresentado no exemplo a seguir, que possui um título nível 4 e, em seguida, uma lista sem numeração.

> #### Título nível 04 dentro do bloco de citação
>
> * Primeira etapa
> * Segunda etapa
> * Terceira etapa com texto em **negrito**

Emojis

Grande parte dos visualizadores de markdown também permitem a inserção de Emojis, que podem ser utilizados inserindo o nome do emoji iniciado e terminado com o caracter : (dois pontos), como apresentado abaixo.

Acesse a Lista completa de emojis para visualizar todos os emojis disponíveis.

Fontes

https://daringfireball.net/projects/markdown/

https://www.ibm.com/docs/en/SSYKAV?topic=train-how-do-use-markdown

https://www.markdownguide.org/getting-started/