Markdown Cheatsheet

Guía completa de referencia para sintaxis Markdown

Basado en la especificación GitHub Flavored Markdown (GFM) y CommonMark

Sintaxis Básica

Elementos fundamentales del Markdown original

Encabezados (Estilo ATX)

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

Encabezados (Estilo Setext)

Sintaxis
Heading 1
=========

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

Énfasis y Formato

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

Código en Línea

`code`→code
``code with `backtick` ``→code with `backtick`
Consejo
Use comillas invertidas dobles cuando su código contenga comillas invertidas simples.

Bloques de Código (Fenced Code Blocks)

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

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

greet("World");
Lenguajes soportados para resaltado de sintaxis
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Enlaces

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Enlace de referencia
[text][ref]

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

Imágenes

Sintaxis
![Alt text](url)
Con título
![Alt text](url "Title")
Imagen con enlace
[![Alt](image.jpg)](link)
Referencia
![Alt][ref]

[ref]: url "Title"

Listas No Ordenadas

Sintaxis
- 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

Sintaxis
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

Citas (Blockquotes)

Sintaxis
> 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.

Líneas Horizontales

Sintaxis
---

***

___
Resultado

Extensiones GFM

Características adicionales de GitHub Flavored Markdown

Tablas

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

Alineación:
:--- izquierda
:---: centro
---: derecha
Resultado
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Listas de Tareas

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

Autolinks

URLs y correos se enlazan automáticamente
www.example.com
https://example.com
[email protected]
Resultado

Alertas/Callouts (GitHub)

Sintaxis
> [!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.

Sintaxis Extendida

Características avanzadas soportadas por algunos parsers

Notas al Pie

Sintaxis
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.

Listas de Definiciones

Sintaxis
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 Resaltado

==highlighted text==→highlighted text
Nota
Soportado por algunos parsers como Obsidian, Notion y otros.

Subíndice y Superíndice

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

Emojis

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Referencia completa
Lista completa de códigos de emoji

Abreviaciones

Sintaxis
HTML is widely used on the web.

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

Fórmulas Matemáticas (LaTeX)

En línea
The formula $E = mc^2$ is famous.
Resultado
The formula E = mc² is famous.
Bloque
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Resultado
n!k!(n-k)! = (nk)

HTML y Elementos Especiales

Uso de HTML inline y caracteres especiales

HTML en Línea

Elementos soportados
<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 especiales
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Caracteres que pueden escaparse
\ ` * _ { } [ ] ( ) # + - . ! |

Saltos de Línea

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;→(espacio de no separación)
&lt; &gt;→< >
&amp;→&

Características Avanzadas de GitHub

Funcionalidades específicas de GitHub Flavored Markdown

Diagramas Mermaid

Diagrama de flujo
```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 circular
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Diagrama de secuencia
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Tipos de diagramas soportados
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Teclas de Teclado (kbd)

Sintaxis
<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 ↵

Elementos Colapsables

Sintaxis
<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

Menciones y Referencias

Menciones de usuarios
@username
@organization/team
Referencias a Issues y PRs
#123
GH-123
username/repo#123
organization/repo#123
Resultado
@username — menciona a un usuario
#123 — referencia issue/PR #123
repo#456 — referencia en otro repositorio

Modelos de Color

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

Comentarios

Sintaxis
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Resultado
(Los comentarios son invisibles en el documento renderizado)

SHA de Commits

Sintaxis
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Resultado
a1b2c3d — enlace al commit
repo@a1b2c3d — commit en otro repositorio

Código con Diff

Sintaxis
```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;
  }

Anclas y Enlaces Internos

Creando un ancla
<a name="section"></a>
## My Section
Enlazando a un ancla
[Go to section](#section)
[Back to top](#top)
Resultado
Go to section|Back to top ⬆️

Imágenes con Tamaño

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>
Consejo
Use HTML cuando necesite controlar dimensiones o alineación de imágenes.

Tabla de Contenidos

Sintaxis
## Table of Contents

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

Badges/Shields

Sintaxis
![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

Alineación de Texto

Sintaxis
<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

Herramientas y Recursos

Enlaces útiles para trabajar con Markdown

Referencias y Recursos