Elementos enriquecidos

Actualizado el 12 nov 2026

Tablas

Tablas GFM estándar con columnas ordenables: haz clic en cualquier cabecera para ordenar:

| Language   | Year | Typing  |
| ---------- | ---- | ------- |
| TypeScript | 2012 | Static  |
| Python     | 1991 | Dynamic |
| Rust       | 2010 | Static  |
| JavaScript | 1995 | Dynamic |

Se renderiza así:

Avisos

Los avisos destacan información importante. Tipos disponibles: note, tip, info, warning, danger.

Sintaxis de GitHub:

> [!TIP]
> GitHub syntax also works.

Sintaxis de directiva:

:::note
This is a note.
:::

Título personalizado:

:::warning[Breaking Change]
This API has been removed in v2.
:::

Se renderiza así:

Desplegables

Crea contenido desplegable con la directiva :::details:

:::details[Click to expand]
Hidden content here with **markdown** support.
:::

Se renderiza así:

Puedes anidar cualquier markdown dentro, incluidos bloques de código, listas y avisos:

Pestañas de código

Agrupa bloques de código consecutivos en pestañas con la meta tab="name":

```js tab="JavaScript"
console.log("hello")
```

```python tab="Python"
print("hello")
```

Se renderiza así:

console.log("hello")

print("hello")

Añade sync="key" para mantener sincronizados varios grupos de pestañas de código en la página. Al seleccionar una pestaña en un grupo se actualizan todos los demás con la misma clave:

```js tab="JavaScript" sync="lang"
console.log("hello")
```

```python tab="Python" sync="lang"
print("hello")
```

Pestañas de contenido

Agrupa contenido arbitrario en pestañas con la directiva :::tab. Las pestañas consecutivas se agrupan automáticamente.

Añade un atributo sync para sincronizar la selección de pestañas entre varios grupos de la misma página. Cuando un usuario selecciona una pestaña en un grupo, todos los demás grupos con la misma clave sync cambian a la pestaña correspondiente. La selección se guarda en localStorage.

:::tab{title="npm" sync="pm"}
npm install livemark
:::

:::tab{title="pnpm" sync="pm"}
pnpm add livemark
:::

Este es un ejemplo sin sync:

:::tab{title="React"}
React uses JSX for templating and hooks for state management.
:::

:::tab{title="Vue"}
Vue uses single-file components with template, script, and style sections.
:::

Se renderiza así:

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

<template>
  <h1>Hello</h1>
</template>

Pasos

Añade [step] a los encabezados para crear guías numeradas paso a paso:

### Install Dependencies [step]

Run `npm install` to add all required packages.

### Configure Project [step]

Create a config file in the project root.

### Deploy [step]

Push to production.

Se renderiza así:

Instalar dependencias

Ejecuta npm install para añadir todos los paquetes necesarios.

Configurar el proyecto

Crea un archivo de configuración en la raíz del proyecto.

Desplegar

Publica en producción.

Tarjetas

Crea tarjetas de contenido con la directiva :::card. Las tarjetas consecutivas se agrupan automáticamente en una cuadrícula.

:::card{title="Getting Started" href="/introduction" icon="rocket"}
Learn how to set up your first project.
:::

:::card{title="Configuration" href="/configuration" icon="layers"}
Configure your Livemark project.
:::

Se renderiza así:

Insignias

Insignias de estado en línea con la directiva :badge:

:badge[Beta] :badge[Stable]{variant="positive"} :badge[Experimental]{variant="warning"} :badge[Deprecated]{variant="destructive"} :badge[New]{variant="secondary"}

Se renderiza así:

Beta Estable Experimental Obsoleto Nuevo

Variantes disponibles: default, secondary, positive, warning, destructive, outline, ghost, link.

Botones

Botones de enlace para llamadas a la acción con la directiva hoja ::button:

::button[Get Started]{href="/introduction"}

Con opciones de variante y tamaño:

::button[Get Started]{href="/introduction" variant="default" size="lg"}
::button[Configuration]{href="/configuration" variant="outline"}
::button[View Source]{href="/github" variant="secondary" size="sm"}

También puedes usar el atributo label:

::button{href="/introduction" label="Get Started"}

Se renderiza así:

Variantes disponibles: default, outline, secondary, ghost, positive, warning, destructive, link. Tamaños disponibles: default, sm, lg.

Iconos

Iconos en línea de la biblioteca Lucide con la directiva :icon:

:icon{name="rocket"} Launch :icon{name="check"} Done :icon{name="heart"} Love

Se renderiza así:

Lanzar Hecho Amor

Con colores de Tailwind:

:icon{name="check" className="text-positive"} Pass :icon{name="x" className="text-destructive"} Fail :icon{name="star" className="text-warning"} Star

Se renderiza así:

Correcto Fallo Estrella

Árbol de archivos

Muestra estructuras de archivos y directorios con la directiva :::filetree. Los directorios se indican con una / final:

:::filetree

- src/
  - components/
    - Button.tsx
    - Card.tsx
  - helpers/
    - style.ts
  - index.ts
- package.json
- tsconfig.json
:::

Se renderiza así:

Columnas

Coloca contenido lado a lado con directivas :::column consecutivas. Se agrupan automáticamente en una cuadrícula:

:::column
**Left column** with markdown content.
:::

:::column
**Right column** with more content.
:::

Se renderiza así: