Guía sobre Markdown

¡Hola! Hace un tiempo que me encuentro siguiendo el curso de Full Stack JavaScript de Odin Project. Como parte del módulo de Node.js, uno de los proyectos consiste en construir un blog personal. Decidí incluirlo en mi página web para darle una mayor utilidad y evitar que quedara simplemente como otro proyecto del curso.

En algún otro post tal vez comparta más sobre cómo desarrollé el proyecto. Para este artículo, lo importante es que decidí crear una guía de Markdown que me sirviera como referencia al momento de escribir los blogs.

Para poder renderizar markdown en esta aplicación utilicé:

react-markdown
react-syntax-highlighter
remark
remark-gfm
remark-github-alerts
rehype-raw
rehype-slug
mermaid

A continuación encontrarán una guía/referencia sobre como escribir Markdown. Para cada sección va a aparecer primero el markdown y luego va a aparecer el resultado que produce.

Tabla de Contenidos

Títulos
Párrafos y saltos de línea
Formatos de texto
Listas
Links
Imágenes
Citas
Código
Bloques de Código
Reglas horizontales
Tablas
Listas de tareas
HTML en Markdown
Emojis
Teclas del teclado
Secciones colapsables
Alertas
Pie de página
Diagramas

Títulos

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1

H2

H3

H4

H5

H6

Ejemplo de un blog

# Título del blog

## Sección principal

### Sub-sección

#### Algo menos importante a lo anterior

Título del blog

Sección principal

Sub-sección

Algo menos importante a lo anterior

Alternativa a la sintaxis de H1/H2

Título 1
=========

Título 2
---------

Título 1

Título 2

Párrafos y saltos de línea

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el primer párrafo.

Este es el segundo párrafo.

Forced Line Break

(Hay que agregar espacios luego de cada línea)  
Line one.  
Line two.

Line one.
Line two.

Formatos de texto

**Bold**
*Italic*
***Bold Italic***
~~Strikethrough~~
`Inline code`

Bold
Italic
Bold Italic
~~Strikethrough~~
Inline code

Sintaxis alternativa

__Bold__
_Italic_

Bold
Italic

Combinación de diferentes formatos

**Este texto es _muy importante_**

Este texto es muy importante

Listas

Listas desordenadas

- Item uno
- Item dos
- Item tres

Item uno
Item dos
Item tres

Sintaxis alternativa

* Item uno
* Item dos

Item uno
Item dos

Listas ordenadas

1. Paso uno
2. Paso dos
3. Paso tres

Paso uno
Paso dos
Paso tres

Listas anidadas

- Frontend
  - React
  - Vue

- Backend
  - Node.js
  - Django

Frontend
- React
- Vue
Backend
- Node.js
- Django

Anidamiento profundo

- Web Development
  - Frontend
    - React
    - Vue
  - Backend
    - Node.js

Web Development
- Frontend
  - React
  - Vue
- Backend
  - Node.js

Listas mixtas

1. Instalar dependencias
2. Setup

   - Configurar las rutas
   - Agregar los componentes

3. Deploy

Instalar dependencias
Setup
- Configurar las rutas
- Agregar los componentes
Deploy

Links

Links Básicos

[Google](https://google.com)

Google

Links con títulos

[Visitar Google](https://google.com "Google Website")

Visitar Google

URL automático

<https://google.com>

https://google.com

Email Link

<email@example.com>

email@example.com

Links internos

[Ir a instalación](#installation)

Ir a instalación

Links relativos

[About](./about.md)

About

Imágenes

Imágenes básicas

![Texto alternativo](image.png)

Texto alternativo

Imágenes con títulos

![Portfolio](portfolio.png "Captura del Portfolio")

Portfolio

Clickable Image

[![Preview](image.png)](https://example.com)

Remote Images

![Hero](https://example.com/image.jpg)

Hero

Citas

Cita simple

> Esto es una cita.

Esto es una cita.

Cita de multiples líneas

> Esto es la primera línea.
>
> Esto es la segunda línea.

Esto es la primera línea.

Esto es la segunda línea.

Citas anidadas

> Cita principal
>> Cita secundaria

Cita principal

Cita secundaria

Citas con formato

> **Importante:** Leer la documentación.

Importante: Leer la documentación.

Inline Code

`npm install`

npm install

Usa `useEffect()` con cuidado.

Usa useEffect() con cuidado.

Puedes instalar paquetes con `npm install`

Puedes instalar paquetes con npm install

Bloques de código

Bloques de código genéricos

```
Hola mundo
```

JavaScript

```js
function hello() {
  console.log("Hello");
}
```

function hello() {
  console.log("Hello");
}

TypeScript

```ts
type User = {
  name: string;
};
```

type User = {
  name: string;
};

React JSX

```jsx
export default function App() {
  return <h1>Hello</h1>;
}
```

export default function App() {
  return <h1>Hello</h1>;
}

TSX

```tsx
type Props = {
  title: string;
};

export default function Card({ title }: Props) {
  return <h1>{title}</h1>;
}
```

type Props = {
  title: string;
};

export default function Card({ title }: Props) {
  return <h1>{title}</h1>;
}

HTML

```html
<h1>Hello</h1>
```

<h1>Hello</h1>

CSS

```css
.container {
  display: flex;
}
```

.container {
  display: flex;
}

Terminal bash

```bash
npm install
npm run dev
```

npm install
npm run dev

JSON

```json
{
  "name": "blog"
}
```

{
  "name": "blog"
}

Diff Syntax

```diff
+ Added feature
- Removed bug
```

+ Added feature
- Removed bug

Reglas horizontales

---

Caracter de escape

\# No es un título
\* No es italic
\` Not es código

# No es un título

* No es italic

` Not es código

Tablas

| Nombre | Rol |
|------|------|
| Pablo | Developer |
| Anna | Designer |

Nombre	Rol
Pablo	Developer
Anna	Designer

Alineamiento en la tabla

| Izquierda | Centro | Derecha |
|:-----|:------:|------:|
| Text | Text | Text |

Izquierda	Centro	Derecha
Text	Text	Text

Ejemplo con una tabla de precios

| Plan | Precio |
|------|------:|
| Basic | $10 |
| Pro | $25 |
| Premium | $50 |

Plan	Precio
Basic	$10
Pro	$25
Premium	$50

Listas de tareas

- [x] Tarea finalizada
- [ ] Tarea pendiente

Tarea finalizada
Tarea pendiente

HTML en Markdown

HTML Básico

<div>
  Hola Mundo
</div>

Hola Mundo

HTML con estilos

<p style="color:red;">
  Texto Rojo
</p>

Texto Rojo

Imagen con ancho personalizado

<img src="image.png" width="400" />

Contenido centrado

<div align="center">
  Texto Centrado
</div>

Texto Centrado

YouTube Embed (HTML)

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen
></iframe>

Emojis

Códigos para emojis

:rocket:
:fire:
:white_check_mark:
:warning:
:star:

🚀
🔥
✅
⚠️
⭐

Emojis de forma directa

🚀 🔥 ✅ ⚠️ ⭐

🚀 🔥 ✅ ⚠️ ⭐

Emojis comunes

💡 Tip
⚠️ Warning
🔥 Trending
🚀 Launch
📌 Important

💡 Tip
⚠️ Warning
🔥 Trending
🚀 Launch
📌 Important

Teclas del teclado

Pulsa <kbd>Ctrl</kbd> + <kbd>C</kbd>

Pulsa Ctrl + C

Pulsa <kbd>Cmd</kbd> + <kbd>S</kbd>

Pulsa Cmd + S

Secciones colapsables

Básico

<details>
  <summary>Click para expandir</summary>

Texto escondido 

</details>

Click para expandir

Texto escondido

Ejemplo FAQ

<details>
  <summary>¿Qué es React?</summary>

React es una librería para crear UI.

</details>

¿Qué es React?

React es una librería para crear UI.

Es útil para:

FAQs
Explicaciones largas
Contenido opcional
Secciones avanzadas

Alertas

Nota

> [!NOTE]
> Información útil.

Note

Información útil.

Tip

> [!TIP]
> Consejos.

Tip

Consejos.

Importante

> [!IMPORTANT]
> Leer con atención.

Important

Leer con atención.

Alerta

> [!WARNING]
> Ten cuidado.

Warning

Ten cuidado.

Peligro

> [!CAUTION]
> Es acción no se puede deshacer.

Caution

Es acción no se puede deshacer.

Pie de página

React es una librería para crear UI.[^1]

[^1]: Creada por Facebook.

React es una librería para crear UI.¹

Diagramas

Flowchart

```mermaid
graph TD
    A[Start] --> B[Build Blog]
    B --> C[Deploy]
```

Sequence Diagram

```mermaid
sequenceDiagram
    User->>Server: Request
    Server->>Database: Fetch data
    Database-->>Server: Return data
    Server-->>User: Response
```

Blog Architecture Example

```mermaid
graph LR
    Markdown --> ReactMarkdown
    ReactMarkdown --> BlogPage
```

Bloques de código avanzados

Números de líneas

```js showLineNumbers
function hello() {
  console.log("Hello")
}
```

1function hello() {
2  console.log("Hello")
3}

Creada por Facebook. ↩