codarme / lesson-markdown

😃 Markdown

Tudo que você precisa saber sobre essa linguagem de marcação!

Sintaxe

Comentários

Memso usado no HTML: <!-- Comments -->

Headings

Cabeçalhos que serão convetidos para tags h1 - h6

• # h1
• ## h2
• ### h3
• #### h4
• ##### h5
• ###### h6

Linhas de divisão

Pode ser utilizando tanto --- como ***

Texto

Ênfase será transformado em <em>, pode ser feito utilizando *Texto*

Negrito será transformado em <strong>, pode ser feito utilizando **Texto**

Itálico será transformado em <i>, pode ser feito utilizando _Texto_

Taxado será transformado em <del>, pode ser feito utilizando ~~Texto~~

Listas

Lista ordenada:

1. Item 1
1. Item 2
   1. item 2.1
1. Item 3

vai virar:

1. Item 1
2. Item 2
   1. item 2.1
3. Item 3

Lista não ordenada:

- Item 1
- Item 2
  - item 2.1
- Item 3

se transforma em:

• Item 1
• Item 2
  • item 2.1
• Item 3

Lista com checkbox

- [ ] Item 1
- [x] Item 2
  - [ ] Item 2.1
- [ ] Item 3

vira:

• Item 1
• Item 2
  • Item 2.1
• Item 3

Citação (blockquote)

> citação
> > citação aninhada

citação

citação aninhada

Código

Código inline pode ser escrito com uma crase antes e depois: \code``

Se for em bloco, use 3 crases antes e depois.

Tabela

| Name | Date       |
| ---- | ---------- |
| A    | 10/05/2020 |
| B    | 10/05/2020 |

Name	Date
A	10/05/2020
B	10/05/2020

Links e imagens

Links utilizam a seguinte sintaxe: [Texto do link](url "Titulo")

Enquanto imagens: [texto alt](url/da/imagem)

Alinhamento de itens ao centro (texto/imagem/link/etc)

• Texto

<div align="center">
  <p>Parágrado de teste.</p>
</div>

Fica assim:

Parágrado de teste.

• Imagem

<div align="center">
  <img src="https://codar.me/logo.png" height="150">
</div>

Se reflete em:

• Link

<div align="center">
  <a href="google.com">Google</a>
</div>

Fica:

Google

Links úteis

• Wikipedia Markdown
• John Gruber Makrdown doc
• Markdown Emoji Cheat Sheet
• MDX
• Welcome UI - Usando docz e mdx
• Editor de markdown online
• Notion: Bloco de notas online com suporte à markdown