O que é Markdown?
Markdown é uma linguagem de marcação usada em sites como GitHub, Reddit, Stack Overflow, Slack e Trello para padronizar e facilitar a formatação de textos em suas plataformas.
O suporte à alguns estilos de formatação pode variar de plataforma para plataforma por um simples motivo: quando o Markdown foi criado os esforços estavam tão focados em deixar a linguagem o mais fácil e intuitivo possível que criar uma especificação não era uma prioridade.
Porém, a falta de especificação deixou a porta aberta para diferentes implementações. Assim, eventualmente, algumas grandes companhias se juntaram e criaram uma especificação, o CommonMark.
Como funciona o Markdown?
A linguagem criada pelo programador Aaron Swartz e pelo designer de UI John Gruber em 2004, de forma geral, permite você formatar o texto de forma simples (tanto para ler, quanto para escrever) e depois o converte para uma estrutura HTML válida para ser exibida nos navegadores. Com Markdown você não clica em botões para formatar o texto, mas sim insere sua sintaxe no texto para fazer as alterações desejadas.
Sintaxe Básica
Títulos
O Markdown suporta 2 estilos de formatação de títulos:
Setext
Os títulos nesse estilo são sublinhados usando sinais de igual ou traços.
Sintaxe:
Título de 1º nível
===
Título de 2º nível
---
Atx
Para criar títulos nesse formato basta usar # antes de uma palavra ou frase. O número de # usados irá definir o nível do título, podendo variar de 1 até 6.
Sintaxe:
# Título de 1º nível
## Título de 2º nível
### Título de 3º nível
#### Título de 4º nível
##### Título de 5º nível
###### Título de 6º nível
Obs.: Os aplicativos de Markdown podem não lidar muito bem com linhas em branco AUSENTES. Portanto, para maior compatibilidade e legibilidade, separe parágrafos e títulos com uma ou mais linhas em branco.
Parágrafos
Para criar parágrafos, use uma linha em branco para separar uma ou mais linhas de texto.
Esse é um exemplo de parágrafo em Markdown.
Mais fácil que isso, só fazer brigadeiro!
Obs.: Não indente parágrafos com espaços ou TAB, isso é visto como uma má prática de formatação no Markdown, pois não há garantias de que todo o texto estará indentado corretamente.
Quebra de linha
Para quebrar a linha basta finalizar a linha com 2 ou mais espaços e escrever o conteúdo que vai para a linha seguinte.
Obs.: Acontece que qualquer um pode acidentalmente colocar 2 espaços no final de algumas frases ou palavras, causando um efeito indesejado na formatação do texto. Felizmente há outra opção suportada por quase todos os aplicativos que suportam o Markdown: a própria tag <br> do HTML.
Essa é a 1ª linha. <br>Essa é a segunda linha.
Ênfase
Você pode adicionar ênfase ao seu texto tornando-o negrito ou itálico.
Negrito
Para tornar o texto negrito, adicione dois asteriscos ou sublinhados antes e depois de uma palavra ou frase.
**Texto em Negrito**
ou
__Texto em Negrito__
Obs.: Os aplicativos de Markdown podem não saber lidar com sublinhados no meio de uma palavra. Para uma maior compatibilidade, use asteriscos para destacar em negrito o meio de uma palavra.
Itálico
Para tornar o texto itálico, adicione um asterisco ou sublinhado antes e depois de uma palavra ou frase.
*Texto em Itálico*
ou
_Texto em Itálico_
Obs.: Os aplicativos de Markdown podem não saber lidar com sublinhados no meio de uma palavra. Para uma maior compatibilidade, use asteriscos para destacar em itálico o meio de uma palavra.
Negrito e Itálico
Para tornar o texto negrito e itálico, adicione três asteriscos ou sublinhados antes e depois de uma palavra ou frase.
**_Texto em Itálico_**
ou
_**Texto em Itálico**_
ou
***Texto em Itálico***
ou
__*Texto em Itálico*__
ou
*__Texto em Itálico__*
ou
___Texto em Itálico___
Obs.: Os aplicativos de Markdown podem não saber lidar com sublinhados no meio de uma palavra. Para uma maior compatibilidade, use asteriscos para destacar em negrito e itálico o meio de uma palavra.
Citações em Bloco
Para criar uma citação em bloco, adicione um > na frente de um parágrafo.
> Essa é uma citação em bloco.
Citações em Bloco com Múltiplos Parágrafos
Basta adicionar > nas linhas em branco entre os parágrafos.
> Essa é uma citação em bloco.
>
> Como eu queria comer um brigadeiro agora...
Citações em Bloco Aninhadas
Adicione um » na frente do parágrafo que você deseja aninhar.
> Essa é uma citação em bloco.
>
> > Como eu queria comer um brigadeiro agora...
Citações em Bloco com Outros Elementos
As citações em bloco podem conter outros elementos do Markdown, porém nem todos podem ser usados. Você precisa experimentar para ver quais funcionam.
> ## Essa é uma citação em bloco.
>
> _As estrelas são belas por causa de uma flor que não podemos ver._
>
> > Como eu queria comer um **_brigadeiro_** agora...
Listas
Você pode organizar itens de maneira ordenada e não ordenada.
Listas Ordenadas
Para criar uma lista ordenada, adicione os itens linha a linha antecedidos por um número e um ponto. Não é obrigatório os números estarem em ordem numérica, mas é obrigatório a lista começar com o número 1 e, independente da sequência estar de forma sequencial, a saída da parecida com o exemplo a seguir.
1. Comprar chocolate
2. Comprar um filme
3. Fazer brigadeiro
4. Ser feliz
Listas Ordenadas Aninhadas
Basta indentar com um TAB ou 4 espaços dentro de um item da lista e começar a nova lista.
1. Comprar chocolate
2. Comprar um filme
1. Pedir uma recomendação de um filme romântico
3. Fazer brigadeiro
1. Não esquecer da manteiga
2. Ficar de olho para não passar do ponto
4. Ser feliz
Listas Não Ordenadas
Para criar uma lista não ordenada, adicione os itens linha a linha antecedidos por um traço (-), asterisco (*) ou sinal de mais (+). É permitido intercalar entre os sinais, o resultado será o mesmo.
- Comprar uma flor
* Escrever um poema
+ Tornar essa noite inesquecível
Listas Não Ordenadas Aninhadas
Basta indentar com um TAB ou 4 espaços dentro de um item da lista e começar a nova lista.
- Comprar uma flor
- Escrever um poema
* Falar sobre os olhos dele
* Fazer referência ao Pequeno Príncipe
- Tornar essa noite inesquecível
Adicionando Elementos em Listas
Para adicionar outro elemento do Markdown em uma lista e preservar a sua continuidade, indente o elemento com um TAB ou 4 espaços.
Parágrafos
- 1º item da lista
- 2º item da lista
- 3º item da lista
Parágrafo aleatório entre itens de uma lista.
- 4º item da lista
Citações em Bloco
- 1º item da lista
- 2º item da lista
- 3º item da lista
> Citação em bloco aleatória entre itens de uma lista.
- 4º item da lista
Blocos de Código
Os blocos de código são normalmente indentados com um TAB ou quatro espaços. Assim, basta obedecer o recuo da lista e utilizá-lo normalmente.
- 1º item da lista
- 2º item da lista
- 3º item da lista
```html
<html>
<head>
<title>Lista com inserção de outros elementos.</title>
</head>
</html>
```
- 4º item da lista
Imagens
- 1º item da lista
- 2º item da lista
- 3º item da lista
- 4º item da lista
Código
Para formatar uma palavra ou texto como código coloque-a entra crases simples.
`Isso será interpretado como código.`
Evitando a Formatação Dentro das Crases
Se a palavra ou frase que você deseja formatar como código incluir crases, você poderá formatar sem problemas a palavra ou frase colocando-as entre crases duplas (``).
`` Esse é uma formatação de `código` em Markdown. ``
Blocos de Código
Para criar blocos de código, adicione duas linhas com 3 crases (```) e coloque o código desejado entre elas. Caso deseje identificar a linguagem na qual o código é escrito, faça isso na primeira linha imediatamente depois crases, isso não só ajuda a quem lerá o documento a melhor, como identificar do que se trata.
```html
<html>
<head>
<title>À todo vapor pessoal!</title>
</head>
</html>
```
Retas Horizontais
Para criar uma reta horizontal basta digitar três ou mais asteriscos (***), traços (—) ou sublinhados (___) em uma linha sozinhos.
***
---
___
Obs.: Em função de maior compatibilidade, coloque linhas em branco antes e depois das linhas horizontais.
Links
Para criar um link coloque o texto que receberá o link entre colchetes e, logo em seguida URL entre parênteses.
O [Google](https://www.google.com) é uma gigante da tecnologia.
Adicionando títulos
Opcionalmente, você pode adicionar um título para um link. Ele aparecerá quando o usuário passar o mouse sobre o link. Para adicionar um título, coloque-o após a URL, dentro dos parênteses e entre aspas duplas.
O [Google](https://www.google.com "Google, sempre com você!") é uma gigante da tecnologia.
URLs e Endereços de Email
Para transformar uma URL ou endereço de email em um link, coloque-o entre sinais de menor que (<) e maior que (>).
<https://www.google.com>
<teste@chocolate.com>
Obs: Alguns programas dedicados a lidar com Markdown conseguem lidar automaticamente com os links sem que isso seja feito.
Formatação de Links
Para formatar links, adicione asteriscos antes dos colchetes e depois dos parênteses. Para indicar links como código, adicione crase entre os colchetes.
Eu amo o **[`Curso em Vídeo`](https://www.youtube.com/cursoemvideo)!**
_[Devdocs](https://devdocs.io/)_ pode te ajudar nos estudos.
Links de Estilo de Referência
Os links no estilo de referência são um tipo especial de link que facilita a exibição e a leitura de URLs no Markdown. Os links no estilo de referência são construídos em duas partes: a parte que você mantém alinhada com o texto e a parte que você armazena em outro lugar no arquivo para manter a leitura fácil do texto.
Formatando a Primeira Parte do Link
A primeira parte de um link no estilo de referência é formatada com dois conjuntos de colchetes. O primeiro conjunto de colchetes envolve o texto que deve aparecer vinculado. O segundo conjunto de colchetes exibe um rótulo usado para apontar para o link que você está armazenando em outro local do documento. Os rótulos podem ser palavras, números sinal de pontuação mas não pode conter espaço ou TAB.
[Google][1]
[GitHub] [5]
Formatando a Segunda Parte do Link
A segunda parte de um link de estilo de referência é formatada da seguinte forma:
O rótulo, entre parênteses, seguido imediatamente por dois pontos e pelo menos um espaço em branco;
O URL do link, que você pode opcionalmente colocar entre sinais de menor que (<) e maior que (>);
O título opcional para o link, que pode ser colocado entre aspas duplas, aspas simples ou parênteses.
Você pode colocar essa segunda parte do link em qualquer lugar do documento do Markdown.
[1]: https://google.com
[2]: https://google.com "Google, a gigante da busca"
[3]: https://gitlab.com
[4]: https://gitlab.com/lucasmc64 "Repositório do Lucas"
[5]: <https://google.com>
[6]: <https://google.com> "Google, a gigante da busca"
[7]: <https://gitlab.com>
[8]: <https://gitlab.com/lucasmc64> "Repositório do Lucas"
Obs.: Os aplicativos de Markdown não sabem como lidar com espaços no meio de um URLs. Para compatibilidade, substitua por URL quaisquer espaços com %20.
Imagens
Para adicionar uma imagem, adicione um ponto de exclamação (!), seguido de um texto alternativo entre colchetes e o caminho ou URL da imagem entre parênteses. Opcionalmente, você pode adicionar um título após o URL, dentro dos parênteses e entre aspas duplas.
Vinculando Imagens
Para adicionar um link a uma imagem, coloque o Markdown da imagem entre colchetes e, em seguida, adicione o link entre parênteses.
[](https://pt.wikipedia.org/wiki/Tux)
Exibir Caracteres Reservados
Para exibir um caractere que seria usado para formatar texto em um documento Markdown, adicione uma barra invertida (\) na frente do caractere.
\# Sem a barra essa frase viraria um título de 1º nível
Caracteres Reservados Que Podem Ser Exibidos
Você pode usar uma barra invertida para exibir os seguintes caracteres.
| Caractere | Nome |
|---|---|
| \ | Barra invertida |
| ` | Crase |
| * | Asterisco |
| _ | Underscore |
| { e } | Chaves |
| [ e ] | Colchetes |
| ( e ) | Parênteses |
| # | Hashtag / Jogo da Velha / Cerquilha |
| + | Mais |
| - | Menos |
| . | Ponto |
| ! | Exclamação |
| | | Pipe |
HTML
Muitos aplicativos Markdown permitem que você use tags HTML em texto no formato Markdown. O uso de HTML é útil quando você precisa alterar os atributos de um elemento, como especificar a cor do texto ou alterar a largura de uma imagem, por exemplo.
<p style="color: red;">Essa frase tem a cor vermelha.</p>
Obs.: Nem todas os aplicativos Markdown suportam HTML em seus documentos. Já alguns suportam apenas um subconjunto de tags. Tente não usar a sintaxe Markdown dentro das tags HTML, pode não funcionar.
Sintaxe Extendida
Nem todos os aplicativos de Markdown oferecem suporte aos elementos da sintaxe extendida. Tome cuidado e verifique a compatibilidade.
Linguagens de Marcação Leves
Existem várias linguagens de marcação leves que são superconjuntos do Markdown. Muitos dos aplicativos Markdown mais populares usam uma das seguintes linguagens de marcação leves:
Tabelas
Para adicionar uma tabela, use três ou mais hífens (—) para criar o cabeçalho de cada coluna e use pipes (|) para separar cada coluna. Como opção, você pode adicionar pipes nas duas extremidades da tabela. As larguras das células podem variar, saída terá a mesma aparência.
| Número | Texto |
| ------ | ----- |
| 1 | Um |
| 2 | Dois |
| 3 | Três |
Alinhamento
Você pode alinhar o texto nas colunas à esquerda, direita ou centro adicionando dois pontos (:) à esquerda, direita ou nos dois lados dos hífens na linha do cabeçalho.
| Número | Texto | Ordem |
| :----- | :---: | ----: |
| 1 | Um | 1º |
| 2 | Dois | 2º |
| 3 | Três | 3º |
Formatação de Texto em Tabelas
Você pode formatar o texto nas tabelas. Por exemplo, você pode adicionar links, código (palavras ou frases, não blocos de código) e ênfase .
Mas você não pode adicionar títulos, citações de bloco, listas, retas horizontais, imagens ou tags HTML.
Exibir Pipe em Tabelas
Você pode exibir um pipe em uma tabela usando seu código de caractere HTML (\|).
Blocos de Código Protegidos
A sintaxe básica do Markdown permite criar blocos de código recuando linhas por quatro espaços ou uma TAB. Mas você pode usar blocos de códigos protegidos. Dependendo do seu processador ou editor do Markdown, você usará três crases ( ```) ou três tils ( ~~~) nas linhas antes e depois do bloco de código. A melhor parte? Você não precisa recuar nenhuma linha!
~~~
let teste = true;
if(teste){
//code
}
~~~
Realce de Sintaxe
Esse recurso permite adicionar realce de cores para qualquer linguagem em que seu código foi escrito. Para adicionar realce de sintaxe, especifique a linguagem ao lado das aspas triplas antes do bloco de código protegido.
```javascript
let teste = true
if(teste){
//code
}
```
Notas de Rodapé
Quando você cria uma nota de rodapé, um número sobrescrito com um link aparece onde você adicionou a referência da nota de rodapé. Os leitores podem clicar no link para ir para o conteúdo da nota de rodapé na parte inferior da página.
Para criar uma referência de nota de rodapé, adicione um sinal de intercalação e um identificador entre colchetes ([^1]).
Adicione a nota de rodapé usando outro sinal de intercalação e o número entre colchetes com dois pontos e texto ([^1]: Nota de rodapé número 1.). Você não precisa colocar notas de rodapé no final do documento. Você pode colocá-los em qualquer lugar, exceto dentro de outros elementos, como listas, citações de bloco e tabelas.
Essa é a primeira [^1] nota de rodapé.
Essa é a segunda [^dois] nota de rodapé.
[^1]: Testando 1, 2, 3.
[^dois]: Em todos esses anos nessa indústria vital... isso nunca tinha me acontecido.
IDs de Cabeçalho
Adicionar IDs personalizados permite vincular diretamente aos títulos e modificá-los com CSS. Para adicionar um ID de título personalizado, coloque-o entre chaves na mesma linha que o título.
## Título com ID Customizado {#teste-id}
Vinculando a Códigos de Cabeçalho
Você pode vincular títulos com IDs personalizados no arquivo, criando um link padrão com um sinal de número (#) seguido pelo ID do título personalizado.
[Notas de Rodapé](#notas-de-rodape)
Obs: Outros sites podem se vincular ao cabeçalho adicionando o ID do cabeçalho personalizado ao URL completo da página da web
[Notas de Rodapé](http://www.github.com/lucasmc64/markdown/#notas-de-rodape)
Lista de Definições
Para criar uma lista de definições, digite o termo na primeira linha. Na próxima linha, digite dois pontos seguidos por um espaço e a definição.
Primeiro termo
: Definição do 1º termo
Segundo termo
: Definição do 2º termo
: 2ª definição do 2º termo
Tachado
Você pode tachar palavras colocando uma linha horizontal no centro delas. Esse recurso permite que você indique que certas palavras são um erro que não se destina à inclusão no documento. Para tachar palavras, use dois símbolos de til (~~) antes e depois das palavras.
~~Biscoito ou~~ Bolacha? Esse alimento faz parte do café da manhã de muitos brsileiros.
Lista de Tarefas
As listas de tarefas permitem criar uma lista de itens com caixas de seleção. Para criar uma lista de tarefas, adicione traços (-) e colchetes com um espaço ([ ]) na frente dos itens da lista de tarefas. Para selecionar uma caixa de seleção, adicione um x entre colchetes ([x]).
- [ ] Terminar notas de Markdown
- [ ] Subir para o GitHub
- [ ] Começar notas de Git
Emoji
Existem duas maneiras de adicionar emoji aos arquivos do Markdown: copie e cole o emoji no texto formatado no Markdown ou digite códigos do emoji .
Copiando e Colando Emoji
Na maioria dos casos, você pode simplesmente copiar um emoji de uma fonte qualquer como Emojipedia e colá-lo no seu documento.
Usando Códigos de Emoji
Alguns aplicativos Markdown permitem inserir emoticons digitando códigos de emoji. Eles começam e terminam com dois pontos e incluem o nome de um emoji.
Meu coração está :broken_heart:...
Link Automático de URL
Muitos processadores Markdown transformam URLs automaticamente em links. Isso significa que, se você digitar https://www.google.com, seu processador Markdown o transformará automaticamente em um link, mesmo que você não tenha usado colchetes ou os sinais de menor que (<) e maior que (>).
https://www.google.com
Desativando Link Automático de URL
Se você não deseja que um URL seja vinculado automaticamente, é possível remover o link declarando a URL como código, colocando crase antes e depois da URL.
`https://www.google.com`
Ferramentas
Algumas ferramentas que suportam o Markdown:
- Typora (pago): Um ótimo editor desenhado para notas e documentos e disponível para Linux, Windows e MacOS;
- Notion (plano gratuito): Plataforma de notas pessoais que utiliza o Markdown em seu coração;
- Obsidian (gratuito): Um ótimo editor disponível para várias plataformas;
- Joplin (gratuito e open-source): Editor multiplataforma e organizador de notas em Markdown.
- Apostrophe (gratuito e open-source): Editor Markdown disponível somente para linux.
Claro que exitem muitas plataformas que suportam o Markdown e editores incríveis. E aqui estão mais algumas delas. Você também pode usar o próprio Bloco de Notas, até mesmo o Visual Studio Code para criar e editar seus documentos.