Guía de Markdown y componentes

Este post de demostración recoge todo lo que puedes escribir en el contenido del sitio: Markdown estándar renderizado con Comark más componentes Svelte interactivos.

Texto y énfasis

Puedes usar negrita, cursiva, tachado y código en línea. Los enlaces apuntan a sitios como Astro y abren con normalidad.

Las citas en bloque sirven para destacar una idea o una referencia. Pueden ocupar varias líneas.

Listas

Lista sin orden:

• Primer elemento

• Segundo elemento

  • Anidado
• Tercer elemento

Lista ordenada:

1. Define la colección en src/config/collections.json
2. Crea el contenido en src/content/
3. El build genera las rutas automáticamente

Tabla

Código

import { parse } from 'comark'
import highlight from 'comark/plugins/highlight'

const tree = await parse('# Hola **mundo**', { plugins: [highlight()] })
console.log(tree.nodes)

Imágenes

Las imágenes se optimizan en build automáticamente:

Componente Alert

El componente Svelte Alert se invoca con la sintaxis de directiva de Comark y admite cuatro variantes: