Markdown Cheatsheet

Guia completo de referência para sintaxe Markdown

Baseado na especificação GitHub Flavored Markdown (GFM) e CommonMark

Sintaxe Básica

Elementos fundamentais do Markdown original

Cabeçalhos (ATX Style)

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

Cabeçalhos (Setext Style)

Sintaxe
Heading 1
=========

Heading 2
---------
Resultado
Heading 1Heading 2

Ênfase e Formatação

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

Código Inline

`code`→code
``code with `backtick` ``→code with `backtick`
Dica
Use backticks duplos quando seu código contiver backticks simples.

Blocos de Código (Fenced Code Blocks)

Sintaxe
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
Resultado
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
Linguagens suportadas para syntax highlighting
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Links

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Link de referência
[text][ref]

[ref]: https://example.com "Title"

Imagens

Sintaxe
![Alt text](url)
Com título
![Alt text](url "Title")
Imagem com link
[![Alt](image.jpg)](link)
Referência
![Alt][ref]

[ref]: url "Title"

Listas Não Ordenadas

Sintaxe
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
Resultado
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

Listas Ordenadas

Sintaxe
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
Resultado
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Citações (Blockquotes)

Sintaxe
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
Resultado
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

Linhas Horizontais

Sintaxe
---

***

___
Resultado

Extensões GFM

Recursos adicionais do GitHub Flavored Markdown

Tabelas

Sintaxe
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

Alinhamento:
:--- esquerda
:---: centro
---: direita
Resultado
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Lista de Tarefas (Task List)

Sintaxe
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
Resultado
  • Completed task
  • Another done task
  • Pending task
  • Another pending

Autolinks

URLs e e-mails são automaticamente linkados
www.example.com
https://example.com
[email protected]
Resultado

Alertas/Callouts (GitHub)

Sintaxe
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
Resultado
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

Sintaxe Estendida

Recursos avançados suportados por alguns parsers

Notas de Rodapé

Sintaxe
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
Resultado

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

Lista de Definições

Sintaxe
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
Resultado
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

Texto Destacado

==highlighted text==→highlighted text
Nota
Suportado por alguns parsers como Obsidian, Notion e outros.

Subscrito e Sobrescrito

H~2~O→H2O
X^2^→X2
Alternativa HTML
H<sub>2</sub>O
X<sup>2</sup>

Emojis

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Referência completa
Lista completa de shortcodes de emoji

Abreviações

Sintaxe
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
Resultado
HTML is widely used on the web.

Fórmulas Matemáticas (LaTeX)

Inline
The formula $E = mc^2$ is famous.
Resultado
The formula E = mc² is famous.
Bloco
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Resultado
n!k!(n-k)! = (nk)

HTML e Elementos Especiais

Uso de HTML inline e caracteres especiais

HTML Inline

Elementos suportados
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
Resultado
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

Escape de Caracteres

Use \ antes de caracteres especiais
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Caracteres que podem ser escapados
\ ` * _ { } [ ] ( ) # + - . ! |

Quebras de Linha

Métodos
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

Entidades HTML

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(espaço não-quebrável)
&lt; &gt;→< >
&amp;→&

Recursos Avançados do GitHub

Funcionalidades específicas do GitHub Flavored Markdown

Diagramas Mermaid

Fluxograma
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Resultado
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Gráfico de Pizza
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Diagrama de Sequência
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Tipos de diagramas suportados
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Botões com Teclas (kbd)

Sintaxe
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
Resultado
Ctrl + C
Cmd + Shift + P
Enter ↵

Itens Colapsáveis

Sintaxe
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
Resultado
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Menções e Referências

Menções de usuários
@username
@organization/team
Referência a Issues e PRs
#123
GH-123
username/repo#123
organization/repo#123
Resultado
@username — menciona um usuário
#123 — referencia issue/PR #123
repo#456 — referencia em outro repo

Modelos de Cor

Sintaxe
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
Resultado
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

Comentários

Sintaxe
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Resultado
(Comentários são invisíveis no documento renderizado)

SHA de Commits

Sintaxe
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Resultado
a1b2c3d — link para o commit
repo@a1b2c3d — commit em outro repo

Código com Diff

Sintaxe
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
Resultado
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

Âncoras e Links Internos

Criando uma âncora
<a name="section"></a>
## My Section
Linkando para uma âncora
[Go to section](#section)
[Back to top](#top)
Resultado
Go to section|Back to top ⬆️

Imagens com Tamanho

Usando HTML
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
Dica
Use HTML quando precisar controlar dimensões ou alinhamento de imagens.

Tabela de Conteúdos

Sintaxe
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Resultado
Table of Contents

Badges/Shields

Sintaxe
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
Resultado
build: passingversion: 1.0.0license: MITdocs: latest

Alinhamento de Texto

Sintaxe
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
Resultado
Centered text
Right-aligned text
Centered bold

Ferramentas e Recursos

Links úteis para trabalhar com Markdown

Referências e Recursos