Entrada

Markdown a PDF

Publicado Actualizado
23 min de lectura
Markdown a PDF

Esta extensión permite convertir cualquier archivo escrito en Markdown (.md) en un documento PDF, directamente desde el editor. Excelente para crear documentación profesional, informes técnicos, apuntes académicos, etc. Funciona con atajos de teclado o comandos de la paleta, facilitando la generación de PDFs y también nos da la posibilidad de exportar a otros formatos como html, png, etc.

Instalación

  1. Abre Visual Studio Code
  2. Cambia a Extensiones
  3. Busca: Markdown PDF (autor: yzane)

Instalar extensión

O puedes abrir su página en el Marketplace y añadirlo:

Markdown PDF

Conversor de Markdown para Visual Studio Code

Marketplace


No requiere configuración extra para empezar a usarla.

Ventajas frente a otras alternativas

OpciónVentaja
PandocMuy potente, pero más complejo
Servicios onlineRápidos, pero poco seguros
Markdown PDFIntegrado, simple y configurable

Markdown PDF destaca por su equilibrio entre simplicidad y control.

Exportación sin conexión:
Todo el proceso ocurre localmente, sin subir archivos a la nube. Ideal para proteger información sensible y trabajo offline.

Cómo usar Markdown PDF

Abre una carpeta en tu equipo, ábrela con Visual Studio Code y crea un archivo con extensión .md. Luego, sigue estos pasos:

  1. Haz clic derecho sobre el archivo y selecciona una de las siguientes opciones:
    • Markdown PDF: Export (pdf)
    • Markdown PDF: Export (html)
    • Markdown PDF: Export (png)
    • Markdown PDF: Export (jpeg)
  2. Espera a que finalice el proceso de exportación.
  3. El archivo generado (por ejemplo, el PDF) se creará en el mismo directorio que el archivo Markdown original.

Exportar a PDF

Características principales

1. Soporte completo de Markdown

Markdown PDF es compatible con la sintaxis estándar de Markdown y respeta la estructura del documento al exportarlo. Se recomienda saber la sintaxis de Markdown, aquí te dejo una referencia rápida a consultar la guía oficial de CommonMark: https://commonmark.org/help/

Markdown PDF respeta:

  • Encabezados (#, ##, ###)
  • Listas ordenadas y no ordenadas
  • Citas (>)
  • Enlaces e imágenes
  • Tablas
  • Bloques de código
  • Énfasis (**negrita**, *cursiva*)

2. Soporte para bloques de código

Los bloques de código se renderizan correctamente:

1
2
3
4
5

```js
function hola() {
  console.log("Hola Markdown PDF");
}
```

Incluye:

  • Tipografía monoespaciada
  • Fondo diferenciado
  • Saltos de línea correctos

Exportar a PDF

3. Soporte para Mermaid (diagramas)

Si usas Mermaid, Markdown PDF puede renderizar diagramas correctamente. Sin embargo, en versiones recientes de Mermaid los diagramas pueden no generarse correctamente al exportar a PDF.

Una forma de solucionarlo es cambiar la versión de la librería en el servidor de mermaid en el archivo de configuración de VS Code (settings.json):

1
2
3
4

{
  // "markdown-pdf.mermaidServer": "https://unpkg.com/mermaid/dist/mermaid.min.js",
  "markdown-pdf.mermaidServer": "https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js",
}

3.1 Diagrama de flujo (Flowchart)

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

    ```mermaid
---
title: "Vertical (arriba → abajo) — TD o TB"
---
flowchart TD
    A[Inicio] --> B{"¿Usuario autenticado?"}
    B -- Sí --> C[Mostrar dashboard]
    B -- No --> D[Redirigir a login]
    C --> E[Fin]
    D --> E
```

```mermaid
---
title: "Horizontal (izquierda → derecha) — LR"
---
flowchart LR
    A[Inicio] --> B{"¿Usuario autenticado?"}
    B -- Sí --> C[Mostrar dashboard]
    B -- No --> D[Redirigir a login]
    C --> E[Fin]
    D --> E
```

```mermaid
---
title: "Cambiar tema (neutral, dark, forest)"
---
%%{init: {'theme': 'forest'}}%%
flowchart LR
    A[Inicio] --> B{"¿Usuario autenticado?"}
    B -- Sí --> C[Mostrar dashboard]
    B -- No --> D[Redirigir a login]
    C --> E[Fin]
    D --> E
```

<h3 style="text-align:center;">Centrado</h3>

<div class="mermaid" align="center">
flowchart TD
    A[Inicio] --> B{"¿Usuario autenticado?"}
    B -- Sí --> C[Mostrar dashboard]
    B -- No --> D[Redirigir a login]
    C --> E[Fin]
    D --> E
</div>

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

3.2. Diagrama de secuencia

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

    <style>
    pre:last-child {
        background: #000;
    }
</style>

```mermaid
---
title: "Diagrama de secuencia normal"
---
sequenceDiagram
    participant Usuario
    participant App
    participant API

    Usuario->>App: Solicita datos
    App->>API: GET /data
    API-->>App: Respuesta JSON
    App-->>Usuario: Muestra información
```

```mermaid
---
title: "Diagrama de secuencia con tema personalizado"
---
%%{init: {
  "theme": "base",
  "themeVariables": {
    "actorBorder": "#4CAF50",
    "actorBkg": "#2196F3",
    "actorTextColor": "#fff",
    "messageColor": "#FF5722",
    "noteBkgColor": "#FF9800",
    "noteTextColor": "#000",
    "fontFamily": "monospace",
  }
}}%%
sequenceDiagram
    participant Usuario
    participant App
    participant API

    Usuario->>App: Solicita datos
    App->>API: GET /data
    API-->>App: Respuesta JSON
    App-->>Usuario: Muestra información
    Note over App,API: Nota importante
```

```mermaid
---
title: "Diagrama de secuencia con tema dark"
---
%%{init: {'theme': 'dark'}}%%
sequenceDiagram
    participant Usuario
    participant App
    participant API

    Usuario->>App: Solicita datos
    App->>API: GET /data
    API-->>App: Respuesta JSON
    App-->>Usuario: Muestra información
```

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

3.3 Diagrama de clases

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

    ```mermaid
---
title: 1. Diagrama Básico
---
classDiagram
    class Usuario {
        +id
        +nombre
        +email
        +login()
    }
```

```mermaid
---
title: 2. Diagrama Medio y relacionaes (con dirección horizontal)
---
classDiagram
    direction LR
    class Usuario {
        +id
        +nombre
        +email
        +login()
        +logout()
    }

    class Admin {
        +permisos
        +crearUsuario()
        +eliminarUsuario()
    }

    class Cliente {
        +id
        +nombre
        +historialCompras()
    }

    Usuario <|-- Admin
    Cliente --> Usuario
```

```mermaid
---
title: 3. Diagrama extendido con notas y relaciones (con tema forest)
---
%%{init: {"theme":"forest","fontFamily":"monospace"}}%%
classDiagram
    class Usuario {
        +id
        +nombre
        +email
        +login()
        +logout()
    }

    class Admin {
        +permisos
        +crearUsuario()
        +eliminarUsuario()
    }

    class Cliente {
        +id
        +nombre
        +historialCompras()
    }

    class Producto {
        +id
        +nombre
        +precio
        +descuento()
    }

    class Pedido {
        +id
        +fecha
        +total()
    }

    class Inventario {
        +productosDisponibles()
        +actualizarStock()
    }

    Usuario <|-- Admin
    Cliente --> Pedido
    Pedido --> Producto
    Producto --> Inventario

    %% Notas usando la sintaxis correcta
    note for  Usuario "Usuario general del sistema"
    note for Admin "Admin con permisos especiales"
    note for Pedido "Pedido contiene productos"
```

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

3.4 Diagrama de estados

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

    ```mermaid
---
title: 1. Diagrama básico
---
stateDiagram-v2
    [*] --> Inactivo

    Inactivo --> Activo : login
    Activo --> Inactivo : logout

    Activo --> Suspendido : timeout
    Suspendido --> Activo : reactivar

```

```mermaid
---
title: 2. Diagrama Medio (con acciones en transiciones y estados)
---
stateDiagram-v2
    [*] --> Inactivo

    Inactivo --> Activo : login / validarCredenciales()
    Activo --> Inactivo : logout / cerrarSesion()

    Activo --> Suspendido : inactividad / bloquear()
    Suspendido --> Activo : reactivar / habilitar()
```

<div class="page">

```mermaid
---
title: 3. Diagrama extendido (con notas y más lógica)
---
stateDiagram-v2
    
    [*] --> Inactivo

    Inactivo --> Validando : login
    Validando --> Activo : OK
    Validando --> Inactivo : ERROR

    state Activo {
        [*] --> Navegando
        Navegando --> Comprando : comprar
        Comprando --> Navegando : cancelar
    }

    Activo --> Suspendido : timeout
    Suspendido --> Activo : reactivar
    Activo --> Inactivo : logout

    note right of Suspendido
      Cuenta bloqueada
      temporalmente
    end note
```

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

3.5 Diagrama ER (Entidad–Relación)

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

    ```mermaid
---
title: 1. Modelo base (conceptual)
---
erDiagram
    USUARIO ||--o{ PEDIDO : realiza
    PEDIDO ||--|{ PRODUCTO : contiene

    USUARIO {
        int id
        string nombre
        string email
        string telefono
    }

    PEDIDO {
        int id
        date fecha
    }

    PRODUCTO {
        int id
        string nombre
        float precio
    }
```

<div class="page">

```mermaid
---
title: 2. Modelo intermedio (lógico temprano)
---
%%{init: {'theme': 'forest'}}%%
erDiagram
    USUARIO ||--o{ PEDIDO : realiza
    PEDIDO ||--o{ DETALLE_PEDIDO : tiene
    PRODUCTO ||--o{ DETALLE_PEDIDO : aparece_en

    USUARIO {
        int id_usuario PK
        string nombre
        string email UK
        string telefono UK
    }

    PEDIDO {
        int id_pedido PK
        date fecha
    }

    PRODUCTO {
        int id_producto PK
        string nombre
        float precio
    }

    DETALLE_PEDIDO {
        int cantidad
        float precio_unitario
    }
```

<div class="page">


<h3>3. Modelo final (lógico / relacional)</h3>

<pre class="mermaid" style="display: flex; justify-content: center; background: transparent; border: none">
%%{init: {'theme': 'neutral'}}%%
erDiagram
    USUARIO ||--o{ PEDIDO : genera
    USUARIO ||--|| ROL : tiene
    PEDIDO ||--o{ DETALLE_PEDIDO : incluye
    PRODUCTO ||--o{ DETALLE_PEDIDO : aparece_en

    USUARIO {
        int id_usuario PK
        string nombre
        string email UK
        int id_rol FK
    }

    ROL {
        int id_rol PK
        string descripcion UK
    }

    PEDIDO {
        int id_pedido PK
        date fecha
        int id_usuario FK
    }

    PRODUCTO {
        int id_producto PK
        string nombre
        float precio
    }

    DETALLE_PEDIDO {
        int id_pedido FK
        int id_producto FK
        int cantidad
        float precio_unitario
    }
</pre>

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

3.6 Diagrama de Gantt

  • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

    ```mermaid
gantt
    title Plan del proyecto
    dateFormat YYYY-MM-DD

    section Desarrollo
    Diseño          : 2024-01-01, 5d
    Implementación  : 2024-01-06, 10d
    Pruebas         : 2024-01-16, 4d
```

```mermaid
gantt
    title Plan del proyecto (con dependencias)
    dateFormat YYYY-MM-DD
    excludes weekends
    axisFormat %d/%m

    section Desarrollo
    Diseño          :done,    d1, 2024-01-01, 5d
    Implementación  :active,  d2, after d1, 10d
    Pruebas         :         d3, after d2, 4d
```

```mermaid
gantt
    title Proyecto - Versión avanzada
    dateFormat YYYY-MM-DD
    excludes weekends
    axisFormat %d/%m

    section Análisis
    Requisitos      :done,    a1, 2024-01-01, 3d
    Aprobación      :milestone, a2, after a1, 0d

    section Desarrollo
    Diseño          :done,    d1, after a2, 5d
    Backend         :active,  d2, after d1, 8d
    Frontend        :         d3, after d1, 8d

    section Pruebas
    Pruebas QA      :         t1, after d2, 4d
    Correcciones    :         t2, after t1, 3d
```

  • Este PDF no se puede mostrar en tu navegador. Descargar PDF

4. Uso de CSS personalizado

Una de sus mejores características es la posibilidad de inyectar CSS propio para personalizar el PDF.

En la configuración de VS Code (settings.json):

1
2
3

"markdown-pdf.styles": [
  "styles/pdf.css"
]

Ejemplos de personalización:

  • Tipografía corporativa
  • Márgenes
  • Colores
  • Estilo de encabezados
  • Apariencia de tablas
FOLDERS
    Sin archivo x
              
        
            {
    "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> @mcherrera</div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"><span class='title'></span></div>",
    "markdown-pdf.mermaidServer": "https://unpkg.com/mermaid@10.2.1/dist/mermaid.min.js",
    "markdown-pdf.styles": [
        "styles/pdf.css"
    ],
    "markdown-pdf.format": "A4",
    "markdown-pdf.margin.top": "2cm",
    "markdown-pdf.margin.bottom": "2cm"
}

        
      
              
        
            /* ===============================
    Fuentes TTF
=============================== */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: normal;
}

body {
  font-family: "Inter", Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.6;
  color: #1f2937;
}

h1 {
  color: #1e3a8a;
  border-bottom: 2px solid #1e3a8a;
}

h2 {
  color: #1e40af;
  margin-top: 1.5em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 10pt;
}

th {
  background: #1e3a8a;
  color: white;
  padding: 6px;
}

td {
  border: 1px solid #d1d5db;
  padding: 6px;
}

pre,
code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5pt;
  z-index: -1;
}

p > code {
    color: #1e40af !important;
}

pre code.language-mermaid {
  color: inherit;
  text-align: center;
  padding: 0;
  border: none;
}

.page {
  page-break-before: always;
}

        
      
              
        
            
        
      
              
        
            ---
title: Documento de prueba markdown-pdf
---

# Documento de prueba

Este documento sirve para **validar los estilos CSS** cargados en `markdown-pdf`.

## Texto y tipografía

Texto normal, **negrita**, *cursiva* y `código en línea`.

## Lista

- Elemento uno
- Elemento dos
- Elemento tres

## Tabla de ejemplo

| Campo        | Tipo     | Descripción              |
|-------------|----------|--------------------------|
| id          | int      | Identificador único      |
| nombre      | string   | Nombre descriptivo       |
| precio      | float    | Precio unitario          |

## Bloque de código

```js
function saludo(nombre) {
  console.log(`Hola ${nombre}`);
}
```

<div class="page"></div>

## Diagrama ER (Mermaid)

```mermaid
erDiagram
    USUARIO ||--o{ PEDIDO : realiza
    USUARIO {
        int id
        string nombre
        string email
    }
    PEDIDO {
        int id
        date fecha
    }
```

## Gantt de ejemplo

```mermaid
gantt
    title Plan del proyecto
    dateFormat YYYY-MM-DD
    axisFormat %d/%m

    section Desarrollo
    Diseño          :done,    d1, 2024-01-01, 5d
    Implementación  :active,  d2, after d1, 10d
    Pruebas         :         d3, after d2, 4d
```

## Cierre

Documento generado para comprobar:
- Fuentes incrustadas
- Estilos CSS
- Diagramas Mermaid
- Saltos de página

    Selecciona un archivo para ver su contenido

    El resultado, sería el siguiente:

    Este PDF no se puede mostrar en tu navegador. Descargar PDF

    5. Encabezados y pies de página

    Puedes definir header y footer para el PDF:

    1
2
3
4

    {
    "markdown-pdf.headerTemplate": "<div style='font-size:10px;'>Mi documento</div>",
    "markdown-pdf.footerTemplate": "<div style='font-size:10px;'>Página <span class='pageNumber'></span></div>"
}

    Por ejemplo:

    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

      # Prueba de Header y Footer

Este documento sirve únicamente para **verificar que el header y footer de página**.

El header debería mostrar:
* **@mcherrera** alineado a la **izquierda**
* **El título del documento** alineado a la **derecha**

El footer debería mostrar:
- [mcherrera.dev](https://mcherrera.dev) a la izquierda
- **Número de página** al centro

Puedes repetir este texto varias veces para ver cómo funciona en varias páginas:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec varius dui, ac sagittis metus. Sed sit amet lectus a erat blandit sodales. Aenean eget nisl nec urna malesuada tristique. Nullam pulvinar eros sit amet arcu convallis, nec feugiat ligula sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec varius dui, ac sagittis metus. Sed sit amet lectus a erat blandit sodales. Aenean eget nisl nec urna malesuada tristique. Nullam pulvinar eros sit amet arcu convallis, nec feugiat ligula sagittis.

<div class="page"></div>

# Segunda página

Así podemos ver que tanto el encabezado como el pie de página se mantienen correctamente en todas las páginas.

    • 1
2
3
4
5
6
7

      {
    "markdown-pdf.format": "A4",
    "markdown-pdf.margin.top": "2cm",
    "markdown-pdf.margin.bottom": "2cm",
    "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> @mcherrera</div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"><span class='title'></span></div>",
    "markdown-pdf.footerTemplate": "<div style='width:100%; font-size:10px; padding: 0 1cm'><a href='https://mcherrera.dev' style='float:left; text-decoration:none; color:inherit;'>mcherrera.dev</a><span style='display:block; text-align:center;'>Página <span class='pageNumber'></span></span></div>"
}

    • Este PDF no se puede mostrar en tu navegador. Descargar PDF

    6. Compatibilidad con imágenes locales y remotas

    Markdown PDF maneja bien:

    • Imágenes locales (./images/imagen.png)
    • Imágenes remotas (https://...)
    • Escalado automático
    • Alineación

    Ejemplo:

    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

      # Prueba de imágenes

Markdown PDF maneja bien:

- Imágenes locales
- Imágenes remotas
- Escalado automático
- Alineación

## Imagen local (ruta relativa)

![Imagen local](./images/heart.png)

## Imagen local con tamaño controlado

<img src="./images/heart.png" width="400" alt="Imagen local escalado">

## Imagen remota

![Logo remoto](https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png)

## Imagen remota centrada

<p align="center">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="200" alt="Imagen remota centrada">
</p>

## Imagen alineada a la derecha

<p align="right">
  <img src="./images/heart.png" width="200" alt="Imagen local derecha">
</p>

    • Este PDF no se puede mostrar en tu navegador. Descargar PDF

    7. Soporte extendido basado en markdown-it

    Markdown PDF utiliza markdown-it, lo que permite usar varias funcionalidades avanzadas de Markdown:

    7.1 Contenedores (markdown-it-container)

    • 1
2
3
4
5
6
7

      ::: note
Este es un bloque de nota
:::

::: warning
Este es un bloque de advertencia
:::

    • 1
2
3
4
5
6

      <div class="note">
<p>Este es un bloque de nota</p>
</div>
<div class="warning">
<p>Este es un bloque de advertencia</p>
</div>

    Se pueden estilizar con CSS.

    7.2 HTML embebido

    1
2
3

    <p align="center">
  <img src="./img/diagrama.png" width="300">
</p>

    Permite centrar imágenes, usar <div> y otros elementos HTML.

    7.3 Checkboxes (markdown-it-checkbox)

    Extensión para habilitar checkboxes en Markdown al generar el PDF.

    • 1
2

      - [x] Tarea completada
- [ ] Tarea pendiente

    • 1
2
3
4

      <ul>
<li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">Tarea completada</label></li>
<li><input type="checkbox" id="checkbox1"><label for="checkbox1">Tarea pendiente</label></li>
</ul>

    7.4 Includes (markdown-it-include)

    Markdown PDF ya incluye soporte para markdown-it-include.

    Este plugin permite insertar el contenido de otros archivos Markdown dentro de un documento principal usando una sintaxis especial.

    La inclusión se realiza anteponiendo dos puntos (:) a un enlace Markdown:

    1

    :[Texto descriptivo](ruta/al/archivo.md)
    • El archivo indicado se inserta directamente en el documento
    • La ruta es relativa al archivo actual

    Ejemplo básico:

    FOLDERS
      Sin archivo x
                
        
            Este documento describe la estructura general del sistema y sus principales componentes.

El objetivo es presentar una visión clara del diseño, facilitando la comprensión del modelo de clases y su relación con los distintos módulos del sistema.

El documento está organizado en secciones independientes que luego se integran en un único archivo PDF mediante inclusión de Markdown.

        
      
                
        
            ```mermaid
classDiagram
  class Usuario {
    +id: int
    +nombre: string
    +email: string
  }

  class Pedido {
    +id: int
    +fecha: date
    +total: float
  }

  class Producto {
    +id: int
    +nombre: string
    +precio: float
  }

  Usuario "1" --> "0..*" Pedido
  Pedido "1" --> "1..*" Producto
```

        
      
                
        
            Como cierre, este documento presenta una visión general del diseño del sistema a través de su modelo de clases.

La separación del contenido en archivos independientes permite mejorar la organización, el mantenimiento y la reutilización de la documentación, sin afectar el resultado final al momento de generar el PDF.

El uso de inclusión de archivos Markdown facilita la actualización del contenido y favorece una documentación clara, modular y escalable.

        
      
                
        
            # Documento principal

## Introducción
:[Introducción](secciones/introduccion.md)

## Diagrama de Clases
:[Diagrama de clase](diagramas/classDiagram.md)

## Conclusión
:[Conclusión](secciones/conclusion.md)

      Selecciona un archivo para ver su contenido

      Al exportar a PDF, la introducción y el diagrama se renderizan como parte del documento, no como un enlace. Por ejemplo, el siguiente PDF sería el resultado:

      Este PDF no se puede mostrar en tu navegador. Descargar PDF


      Consideraciones:

      • Solo funciona con archivos .md
      • El contenido incluido hereda estilos y numeración
      • Ideal para separar capítulos, diagramas y anexos
      • Facilita mantener documentos largos sin repetir contenido

      7.5 PlantUML (markdown-it-plantuml)

      PlantUML permite crear diagramas a partir de texto plano, facilitando su mantenimiento y control de versiones dentro de la documentación técnica. Mediante markdown-it-plantuml, los diagramas definidos en bloques entre las directivas @startuml y @enduml se renderizan automáticamente al exportar a PDF.

      Recuerda definir las directivas de inicio y final; de lo contrario, el diagrama no se renderizará.

      1
2
3

      @startuml
...render...
@enduml

      Ejemplo básico:

      • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

        ## Ejemplo 1 – Estilo visual predeterminado

@startuml
class Usuario {
  id: int
  nombre: string
  email: string
}

class Pedido {
  id: int
  fecha: date
}

Usuario "1" --> "0..*" Pedido
@enduml

## Ejemplo 2 – Estilo visual personalizado

@startuml
skinparam classBackgroundColor #EEF2FF
skinparam classBorderColor #1E40AF
skinparam classFontColor #1F2937
skinparam classFontSize 12

class Producto {
  +id: int
  +nombre: string
  +precio: float
}

class Categoria {
  +id: int
  +nombre: string
}

Categoria "1" --> "0..*" Producto : agrupa
@enduml


## Ejemplo 3 – Paquetes y visibilidad

@startuml
left to right direction

skinparam packageStyle rectangle

package "Dominio" {
  class Usuario {
    +id: int
    +nombre: string
  }

  class Rol {
    +id: int
    +nombre: string
  }
}

package "Autenticación" {
  class AuthService {
    +login()
    +logout()
  }
}

Usuario "*" -- "*" Rol
AuthService ..> Usuario : valida
@enduml

      • Este PDF no se puede mostrar en tu navegador. Descargar PDF

      Ejemplos avanzados

      Personalizar diseño PDF

      Algo realmente destacable de esta extensión es que permite personalizar el estilo del PDF usando CSS. Esto significa que puedes crear tu propio diseño, ajustando tipografías, colores, márgenes, tamaños de letra, etc.

      FOLDERS
        Sin archivo x
                  
        
            {
  "markdown-pdf.styles": [
    "style.css"
  ]
}

        
      
                  
        
            .container {
  max-width: 1200px;
  margin: 0 auto;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 10px;
}
.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  margin: 20px 0;
  border: 1px solid #ccc8;
}
.card-header {
  background: #3498db;
  color: white;
  padding: 15px;
  font-size: 1.2rem;
  font-weight: 600;
}
.card-body {
  padding: 10px;
}
.command {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 0 5px 5px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #2c3e50;
}
.description {
  color: #7f8c8d;
  font-size: 0.7rem;
  margin-bottom: 12px;
  line-height: 1.3;
}
.file-commands .card-header { background: #e74c3c; }
.file-commands .command { border-left-color: #e74c3c; }
.system-commands .card-header { background: #9b59b6; }
.system-commands .command { border-left-color: #9b59b6; }
.network-commands .card-header { background: #f39c12; }
.network-commands .command { border-left-color: #f39c12; }
.permissions-commands .card-header { background: #16a085; }
.permissions-commands .command { border-left-color: #16a085; }
.process-commands .card-header { background: #d35400; }
.process-commands .command { border-left-color: #d35400; }
.search-commands .card-header { background: #27ae60; }
.search-commands .command { border-left-color: #27ae60; }

        
      
                  
        
            <div class="container">
  <p align="center" style="margin: 90px 0">
    <img src="logo_linux.png" height="600"/>
  </p>
  <p align="center" style="margin: 70px 0">
    <h2 align="center">Cheatsheet — comandos Linux esenciales</h2>
    <p align="center">Comandos rápidos para archivos, permisos, procesos, red y búsqueda</p>
  </p>
  <div class="cards-grid" style="margin-top: 155px">
    <div class="card file-commands">
        <div class="card-header">Comandos de Archivos</div>
        <div class="card-body">
          <div class="command">ls -lha</div>
          <div class="description">Listar archivos con detalles y archivos ocultos</div>
          <div class="command">cp -r origen destino</div>
          <div class="description">Copiar directorios de forma recursiva</div>
          <div class="command">rm -rf directorio</div>
          <div class="description">Eliminar directorio y su contenido (¡cuidado!)</div>
          <div class="command">mv archivo nuevo_nombre</div>
          <div class="description">Mover o renombrar archivos</div>
          <div class="command">find /ruta -name "*.txt"</div>
          <div class="description">Buscar archivos por nombre</div>
        </div>
      </div>
      <div class="card system-commands">
        <div class="card-header">Sistema y Información</div>
        <div class="card-body">
          <div class="command">top</div>
          <div class="description">Monitorizar procesos y uso de recursos</div>
          <div class="command">df -h</div>
          <div class="description">Mostrar espacio en disco de forma legible</div>
          <div class="command">free -h</div>
          <div class="description">Mostrar memoria libre y disponible</div>
          <div class="command">uname -a</div>
          <div class="description">Mostrar información del sistema</div>
          <div class="command">history</div>
          <div class="description">Mostrar historial de comandos</div>
        </div>
      </div>
      <div class="card network-commands">
          <div class="card-header">Red y Conectividad</div>
          <div class="card-body">
            <div class="command">ping dominio.com</div>
            <div class="description">Comprobar conectividad con un host</div>
            <div class="command">ifconfig</div>
            <div class="description">Mostrar configuración de interfaces de red</div>
            <div class="command">netstat -tulpn</div>
            <div class="description">Mostrar puertos y conexiones activas</div>
            <div class="command">ssh usuario@host</div>
            <div class="description">Conectar por SSH a un servidor remoto</div>
            <div class="command">wget url</div>
            <div class="description">Descargar archivos desde internet</div>
          </div>
      </div>
      <div class="card permissions-commands">
        <div class="card-header">Permisos y Propiedad</div>
        <div class="card-body">
          <div class="command">chmod 755 archivo</div>
          <div class="description">Cambiar permisos de archivo (rwxr-xr-x)</div>
          <div class="command">chown usuario:grupo archivo</div>
          <div class="description">Cambiar propietario y grupo de archivo</div>
          <div class="command">chmod +x script.sh</div>
          <div class="description">Hacer un archivo ejecutable</div>
          <div class="command">umask 022</div>
          <div class="description">Establecer máscara de permisos por defecto</div>
          <div class="command">getfacl archivo</div>
          <div class="description">Ver permisos ACL de un archivo</div>
        </div>
      </div>
      <div class="card process-commands">
        <div class="card-header">Gestión de Procesos</div>
        <div class="card-body">
          <div class="command">ps aux</div>
          <div class="description">Listar todos los procesos en ejecución</div>
          <div class="command">kill -9 PID</div>
          <div class="description">Terminar proceso forzosamente por ID</div>
          <div class="command">bg</div>
          <div class="description">Reanudar proceso en segundo plano</div>
          <div class="command">fg</div>
          <div class="description">Traer proceso al primer plano</div>
          <div class="command">nohup comando &</div>
          <div class="description">Ejecutar comando persistente</div>
        </div>
      </div>
      <div class="card search-commands">
        <div class="card-header">Búsqueda y Texto</div>
        <div class="card-body">
          <div class="command">grep "texto" archivo</div>
          <div class="description">Buscar texto dentro de archivos</div>
          <div class="command">awk '{print $1}' archivo</div>
          <div class="description">Procesar texto y extraer campos</div>
          <div class="command">sed 's/old/new/g' archivo</div>
          <div class="description">Reemplazar texto en archivos</div>
          <div class="command">sort archivo</div>
          <div class="description">Ordenar líneas de texto</div>
          <div class="command">uniq archivo</div>
          <div class="description">Mostrar líneas únicas</div>
        </div>
      </div>
  </div>
</div>

        Selecciona un archivo para ver su contenido

        Para ver más opciones de los estilos y cómo se interpretan las rutas revisalo aquí

        A continuación, puedes observar un ejemplo de cómo se vería el documento final aplicando estilos CSS:

        Este PDF no se puede mostrar en tu navegador. Descargar PDF

        Diagramas con PlantUML

        A continuación, puedes ver cómo queda el PDF final usando algunos diagramas con PlantUML que diseñé:

        Este PDF no se puede mostrar en tu navegador. Descargar PDF

        Usar Emojis

        Los emojis se pueden usar dentro de los documentos, pero hay algunos detalles a tener en cuenta. Por ejemplo, si escribes :smile: o pegas directamente un emoji como 😀, al exportar el archivo a PDF el resultado no siempre será el mismo.

        • Los shortcodes (:smile:) son procesados por la extensión y se convierten en imágenes al generar el PDF, por lo que siempre se ven correctamente.
        • Los emojis pegados directamente (😀) sí se muestran, pero dependen de la fuente que use el generador. Si la fuente no los soporta, pueden aparecer en blanco y negro o incluso como cuadros vacíos.

        A continuación, puedes ver cómo queda el documento final usando emojis con shortcodes:

        Este PDF no se puede mostrar en tu navegador. Descargar PDF

        Visual Studio Code , Extensiones
        Esta entrada está licenciada bajo CC BY 4.0 por el autor.