MDViewer

Muestra de sintaxis Markdown

2026-07-27 2540 palabras 12 min de lectura

Una página que recoge toda la sintaxis Markdown y todas las capacidades visuales que admite MDViewer: fórmulas, tablas, diagramas, resaltado de código, bloques destacados, notas al pie y más.

SintaxisMuestraMermaidKaTeX

Esta página demuestra todo lo que MDViewer puede representar. Tómala como una lista de comprobación del renderizado: cada bloque de abajo debería verse ya compuesto, no como símbolos en bruto.

Consejo

Descarga este archivo, ábrelo con el lector de la página de inicio y obtendrás exactamente el mismo resultado.

1. Texto y formato en línea

Un párrafo corriente. Negrita, cursiva, negrita cursiva, tachado, inserción subrayada, resaltado, código en línea.

Subíndices y superíndices: H2O, E = mc2, el elemento 42º.

Un enlace en línea a la especificación CommonMark , un enlace automático https://developer.mozilla.org/ y un enlace interno .

Las abreviaturas muestran su forma completa al pasar el ratón: HTML y CSS son la base del front end.

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

Emoji: 🚀 ✨ 📚 ✅ ⚠️

Salto de línea forzado con dos espacios al final: esta línea pertenece al mismo párrafo que la anterior.

Mostrar el Markdown Ocultar el Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Un párrafo corriente. **Negrita**, *cursiva*, ***negrita cursiva***, ~~tachado~~, ++inserción subrayada++, ==resaltado==, `código en línea`.

Subíndices y superíndices: H~2~O, E = mc^2^, el elemento 42^º^.

Un enlace en línea a la [especificación CommonMark](https://commonmark.org/), un enlace automático <https://developer.mozilla.org/> y un [enlace interno](../quick-start/).

Las abreviaturas muestran su forma completa al pasar el ratón: HTML y CSS son la base del front end.

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

Emoji: :rocket: :sparkles: :books: :white_check_mark: :warning:

Salto de línea forzado con dos espacios al final:
esta línea pertenece al mismo párrafo que la anterior.

2. Niveles de encabezado

Los encabezados reciben un ancla automáticamente, el esquema de la derecha salta a ellos y al pasar el ratón aparece un enlace # al final.

Encabezado de nivel 3

Encabezado de nivel 4

Encabezado de nivel 5
Encabezado de nivel 6

3. Listas

Lista con viñetas

  • Primer elemento
  • Segundo elemento
    • Segundo nivel anidado
      • Tercer nivel anidado
  • Tercer elemento
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5

- Primer elemento
- Segundo elemento
  - Segundo nivel anidado
    - Tercer nivel anidado
- Tercer elemento

Lista numerada

  1. Preparar el contenido
  2. Escribirlo en Markdown
    1. Redactar el texto
    2. Previsualizar sobre la marcha
  3. Publicarlo
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5

1. Preparar el contenido
2. Escribirlo en Markdown
   1. Redactar el texto
   2. Previsualizar sobre la marcha
3. Publicarlo

Lista de tareas

  • Listas de tareas GFM admitidas
  • Los elementos completados se tachan
  • Un elemento pendiente
  • Anidación admitida
    • Los subelementos también se marcan
    • Un subelemento pendiente
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5
6

- [x] Listas de tareas GFM admitidas
- [x] Los elementos completados se tachan
- [ ] Un elemento pendiente
- [ ] Anidación admitida
  - [x] Los subelementos también se marcan
  - [ ] Un subelemento pendiente

Lista de definiciones

Mermaid
Una sintaxis de texto para diagramas, que se renderiza como diagramas de flujo, secuencias y más.
Markdown
Un lenguaje de marcado ligero que expresa la estructura del texto en texto plano.
KaTeX
Una biblioteca de composición matemática que renderiza fórmulas TeX en el navegador, muy rápida.
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5
6
7
8

Mermaid
: Una sintaxis de texto para diagramas, que se renderiza como diagramas de flujo, secuencias y más.

Markdown
: Un lenguaje de marcado ligero que expresa la estructura del texto en texto plano.

KaTeX
: Una biblioteca de composición matemática que renderiza fórmulas TeX en el navegador, muy rápida.

4. Citas y bloques destacados

Una cita corriente. Las citas pueden llevar formato en línea, código y varios párrafos.

Este es el segundo párrafo de la cita.

Una cita anidada.

Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5

> Una cita corriente. Las citas pueden llevar **formato en línea**, `código` y varios párrafos.
>
> Este es el segundo párrafo de la cita.
>
> > Una cita anidada.

Los bloques destacados al estilo GitHub se representan como tarjetas de color con icono:

Nota

Información general que aporta contexto sin afectar al flujo principal.

Consejo

Una sugerencia que te ahorra trabajo. Por ejemplo: pulsa ? para ver todos los atajos.

Importante

Información imprescindible para completar la tarea; saltársela lleva al fracaso.

Advertencia

Algo que requiere tu atención ahora; ignorarlo puede tener consecuencias.

Precaución

Una operación arriesgada: asegúrate de entender las consecuencias antes de ejecutarla.

Mostrar el Markdown Ocultar el Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> [!NOTE]
> Información general que aporta contexto sin afectar al flujo principal.

> [!TIP]
> Una sugerencia que te ahorra trabajo. Por ejemplo: pulsa <kbd>?</kbd> para ver todos los atajos.

> [!IMPORTANT]
> Información imprescindible para completar la tarea; saltársela lleva al fracaso.

> [!WARNING]
> Algo que requiere tu atención ahora; ignorarlo puede tener consecuencias.

> [!CAUTION]
> Una operación arriesgada: asegúrate de entender las consecuencias antes de ejecutarla.

5. Código

En línea y en bloque

El comando de instalación es npm install; el archivo de configuración es package.json.

1
2
3
4
5

# Buscar todos los archivos Markdown de la carpeta
find . -name "*.md" -not -path "./node_modules/*"

# Sumar el total de palabras
wc -w $(find . -name "*.md") | tail -1

Resaltado en varios lenguajes 

1
2
3
4
5
6
7
8

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """Estima el tiempo de lectura a 450 caracteres chinos por minuto."""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "minutos")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Hello Markdown World"))
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
1
2
3
4
5
6
7
8

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]
1
2
3
4
5

  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

La esquina superior derecha de un bloque de código ofrece los botones copiar, números de línea y ajuste de línea; los bloques de más de 24 líneas se pliegan solos.

6. Tablas

Se admite la sintaxis de alineación, las cabeceras ordenan al pulsarlas y las tablas anchas se desplazan en horizontal.

Función Motor Tamaño Carga
Análisis de Markdown markdown-it 505 KB Primer pintado
Resaltado de sintaxis highlight.js En el paquete principal Primer pintado
Fórmulas matemáticas KaTeX 261 KB Bajo demanda
Diagramas Mermaid 3,3 MB Bajo demanda
Búsqueda de texto completo Fuse.js En el paquete principal Primer pintado
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5
6
7

| Función | Motor | Tamaño | Carga |
|:--------|:-----:|-------:|:------|
| Análisis de Markdown | markdown-it | 505 KB | Primer pintado |
| Resaltado de sintaxis | highlight.js | En el paquete principal | Primer pintado |
| Fórmulas matemáticas | KaTeX | 261 KB | Bajo demanda |
| Diagramas | Mermaid | 3,3 MB | Bajo demanda |
| Búsqueda de texto completo | Fuse.js | En el paquete principal | Primer pintado |

La alineación a la izquierda, centrada y a la derecha se indica con :---, :---: y ---:.

Una tabla con contenido complejo

Sintaxis Se escribe Resultado
Negrita **texto** texto
Código `code` code
Fórmula $a^2+b^2$ $a^2+b^2$
Enlace [nombre](url) nombre
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5
6

| Sintaxis | Se escribe | Resultado |
|----------|-----------|-----------|
| Negrita | `**texto**` | **texto** |
| Código | `` `code` `` | `code` |
| Fórmula | `$a^2+b^2$` | $a^2+b^2$ |
| Enlace | `[nombre](url)` | [nombre](https://example.com) |

7. Matemáticas

Fórmulas en línea

La equivalencia entre masa y energía $E = mc^2$ y la identidad de Euler $e^{i\pi} + 1 = 0$ caben dentro de una frase. Cuando $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Mostrar el Markdown Ocultar el Markdown 
1

La equivalencia entre masa y energía $E = mc^2$ y la identidad de Euler $e^{i\pi} + 1 = 0$ caben dentro de una frase. Cuando $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Fórmulas en bloque

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

Matrices

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

Alineación de varias líneas

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Funciones a trozos e integrales

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. Diagramas (Mermaid)

Los diagramas cambian de color junto con el tema claro u oscuro; al pasar el ratón puedes copiar el código o descargar el SVG desde la esquina superior derecha.

Diagrama de flujo

Diagrama de secuencia

Diagrama de clases

Diagrama de estados

Diagrama entidad-relación

Diagrama de Gantt

Gráfico circular

Recorrido del usuario

Mapa mental

Grafo de Git

9. Bloques plegables

Pulsa para desplegar: ¿por qué el motor de diagramas se carga bajo demanda?

Empaquetado, Mermaid ocupa unos 3,3 MB: es la dependencia más grande de todo el proyecto. Ponerlo en el paquete principal obligaría a descargarlo a todo el mundo, incluso para un documento sin un solo diagrama.

Por eso MDViewer separa Mermaid y KaTeX en módulos ES independientes y los trae con un import() dinámico solo cuando en la página aparece de verdad un bloque mermaid o una fórmula. Para un documento de solo texto, el primer pintado necesita unos 505 KB.

Pulsa para desplegar: ¿qué formatos de front matter se admiten?

Los tres. El lector los detecta y los muestra en una tarjeta plegable bajo el título del documento:

  • YAML: entre ---, el más habitual
  • TOML: entre +++
  • JSON: entre { }

Los campos como title, description, date, author y tags se extraen a la cabecera del documento y se muestran por separado.

Mostrar el Markdown Ocultar el Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<details>
<summary>Pulsa para desplegar: ¿por qué el motor de diagramas se carga bajo demanda?</summary>

Empaquetado, Mermaid ocupa unos 3,3 MB: es la dependencia más grande de todo el proyecto. Ponerlo en el paquete principal obligaría a descargarlo a todo el mundo, incluso para un documento sin un solo diagrama.

Por eso MDViewer separa Mermaid y KaTeX en módulos ES independientes y los trae con un `import()` dinámico solo cuando en la página aparece de verdad un bloque `mermaid` o una fórmula. Para un documento de solo texto, el primer pintado necesita unos 505 KB.

</details>

<details>
<summary>Pulsa para desplegar: ¿qué formatos de front matter se admiten?</summary>

Los tres. El lector los detecta y los muestra en una tarjeta plegable bajo el título del documento:

- **YAML**: entre `---`, el más habitual
- **TOML**: entre `+++`
- **JSON**: entre `{ }`

Los campos como `title`, `description`, `date`, `author` y `tags` se extraen a la cabecera del documento y se muestran por separado.

</details>

10. Notas al pie

Markdown nació en 20041 como una forma de escribir texto con formato en archivos planos. Hoy la mayoría de las herramientas siguen la especificación CommonMark2, con las extensiones de GitHub por encima3.

  1. Lo diseñaron John Gruber y Aaron Swartz, buscando un texto que se lea con naturalidad incluso antes de renderizarlo. ↩︎

  2. Una especificación precisa publicada en 2014 que eliminó buena parte de la ambigüedad de la descripción original. ↩︎

  3. Añade tablas, listas de tareas, tachado y enlaces automáticos: la sintaxis que hoy espera casi todo el mundo. ↩︎

Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5

Markdown nació en 2004[^origin] como una forma de escribir texto con formato en archivos planos. Hoy la mayoría de las herramientas siguen la especificación CommonMark[^spec], con las extensiones de GitHub por encima[^gfm].

[^origin]: Lo diseñaron John Gruber y Aaron Swartz, buscando un texto que se lea con naturalidad incluso antes de renderizarlo.
[^spec]: Una especificación precisa publicada en 2014 que eliminó buena parte de la ambigüedad de la descripción original.
[^gfm]: Añade tablas, listas de tareas, tachado y enlaces automáticos: la sintaxis que hoy espera casi todo el mundo.

11. Imágenes

Las imágenes se amplían al pulsarlas, se acercan con la rueda y se desplazan arrastrando. Una imagen con título se representa con un pie centrado.

La vista de lectura de tres columnas de MDViewer
Tres columnas: árbol de archivos a la izquierda, contenido en el centro, esquema a la derecha

12. HTML en bruto

El HTML se puede escribir directamente en Markdown y se representa tal cual:

Componente de insignia Escrito como HTML Ctrl + K
Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5
6

<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">Componente de insignia</span>
  <span class="badge">Escrito como HTML</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. Escapes y caracteres especiales

Escapes con barra invertida: *no es cursiva*, `no es código`, # no es un encabezado.

Entidades HTML: © — … → ≤ ≠

Puntuación y escrituras mezcladas: «comillas latinas», “comillas inglesas”, rayas — y puntos suspensivos…

Mostrar el Markdown Ocultar el Markdown 
1
2
3
4
5

Escapes con barra invertida: \*no es cursiva\*, \`no es código\`, \# no es un encabezado.

Entidades HTML: &copy; &mdash; &hellip; &rarr; &le; &ne;

Puntuación y escrituras mezcladas: «comillas latinas», “comillas inglesas”, rayas — y puntos suspensivos…

Lista de comprobación del renderizado

Si todo lo de abajo coincide con lo que ves, la cadena de renderizado funciona por completo:

  • Los encabezados tienen ancla y el esquema salta a ellos resaltando la posición actual
  • Los bloques de código tienen color, etiqueta de lenguaje y botón de copia
  • Las tablas tienen bordes y franjas al pasar el ratón, y las cabeceras ordenan al pulsarlas
  • Las fórmulas en línea y en bloque se ven compuestas como matemáticas, no como LaTeX en bruto
  • Los diez diagramas de Mermaid aparecen como gráficos vectoriales
  • Los bloques destacados se ven como tarjetas de color con icono
  • Las notas al pie enlazan en ambos sentidos
  • Las imágenes se amplían al pulsarlas
  • Al pasar al modo oscuro los diagramas cambian de color