El shortcode annotated permite combinar un elemento de contenido con una nota explicativa. Puedes utilizarlo con bloques de código, pestañas o tablas. Usa --- o <!-- split --> para separar el contenido principal de la nota.
Uso básico #
Escribe tu contenido, añade --- como separador y luego la nota explicativa:
{{< annotated >}}
```javascript
console.log("Hola mundo");
```
---
Nota explicativa.
{{< /annotated >}}
Resultado #
console.log("Hola mundo");
Parámetros #
| Parámetro | Posición | Tipo | Requerido | Descripción |
|---|---|---|---|---|
class | 0 | string | No | Clase CSS adicional para el contenedor. |
Bloques de código #
Utiliza annotated para agrupar un bloque de código con su explicación:
{{< annotated >}}
```bash
npm install @ejemplo/sdk
```
---
Este comando instala el paquete `@ejemplo/sdk` mediante npm.
{{< /annotated >}}
npm install @ejemplo/sdk
@ejemplo/sdk mediante npm.Tabs #
Puedes combinar annotated con tabs para añadir una explicación común a varias pestañas:
{{< annotated >}}
{{< tabs >}}
{{< tab "Saludo" >}}
Hola, este es un ejemplo de explicación común a varias pestañas.
{{< /tab >}}
{{< tab "Despedida" >}}
Adiós, este es un ejemplo de explicación común a varias pestañas.
{{< /tab >}}
{{< /tabs >}}
---
Este es un ejemplo de explicación común a varias pestañas.
{{< /annotated >}}
Tabs de código #
También puedes combinar annotated con tabs y tab para añadir una explicación común a varias pestañas de código:
{{< annotated >}}
{{< tabs >}}
{{< tab "npm" >}}
```bash
npm install @ejemplo/sdk
```
{{< /tab >}}
{{< tab "yarn" >}}
```bash
yarn add @ejemplo/sdk
```
{{< /tab >}}
{{< /tabs >}}
---
Este paquete requiere Node.js 18 o superior.
{{< /annotated >}}
npm install @ejemplo/sdk
yarn add @ejemplo/sdk
Tablas #
También puedes combinar una tabla con una nota explicativa:
{{< annotated >}}
| Parámetro | Tipo | Por defecto |
| :--- | :--------------------- | :--- |
| `timeout` | {{< type number >}} | `3000` |
| `retries` | {{< type number >}} | `3` |
---
El valor de `timeout` se expresa en milisegundos.
{{< /annotated >}}
| Parámetro | Tipo | Por defecto |
|---|---|---|
timeout | number | 3000 |
retries | number | 3 |
timeout se expresa en milisegundos.Separador alternativo #
Puedes usar <!-- split --> en lugar de --- si tu contenido contiene reglas horizontales:
{{< annotated >}}
```yaml
key: value
```
<!-- split -->
El campo `key` acepta cualquier cadena de texto.
{{< /annotated >}}
El contenido debajo del separador se procesa mediante .Page.RenderString, por lo que admite Markdown.