Ejemplos de Formato Avanzado

Esta página demuestra las capacidades de formato avanzado disponibles en nuestra documentación.

Contenedores Personalizados

VitePress soporta varios tipos de contenedores personalizados para resaltar información importante:

INFORMACIÓN

Este es un bloque de información. Úsalo para notas o información adicional que sea útil pero no crítica.

CONSEJO

Este es un bloque de consejos. Perfecto para recomendaciones y buenas prácticas.

ADVERTENCIA

¡Cuidado con esto! Usa este bloque para advertencias sobre posibles problemas o consideraciones importantes.

PELIGRO

Peligro, no hacer esto. Reserva este bloque para situaciones críticas que puedan causar datos corruptos o errores graves.

Detalles

Este es un bloque expandible. Haz clic para ver más información detallada que es opcional leer.

Resaltado de Líneas en Bloques de Código

Puedes resaltar líneas específicas en bloques de código usando la sintaxis {n}:

Resaltado de líneas individuales

export default {
  data() {
    return {
      msg: 'Highlighted!'
    }
  }
}

Resaltado de múltiples líneas

export default {
  data() {
    return {
      msg: 'Highlighted!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Resaltado en diferentes lenguajes

Bash

# Instalar dependencias
npm install

# Ejecutar servidor de desarrollo
npm run dev

# Construir para producción
npm run build

JSON

{
  "name": "wiki-procesar",
  "version": "1.0.0",
  "description": "Repositorio central de documentación",
  "scripts": {
    "dev": "vitepress dev",
    "build": "vitepress build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  }
}

Combinación de Contenedores y Código

Puedes combinar contenedores personalizados con bloques de código resaltados:

ADVERTENCIA

Atención: El siguiente código requiere configuración especial antes de usarlo.

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "Mi Documentación",

  // Configuración importante
  markdown: {
    theme: 'github-dark'
  }
})

CONSEJO

Consejo: Usa los contenedores junto con el resaltado de líneas para guiar la atención del lector hacia las partes más importantes del código.

Buenas Prácticas

1. Usa contenedores apropiadamente:

   • info para información general
   • tip para consejos y optimizaciones
   • warning para precauciones
   • danger para errores críticos
   • note para notas importantes con color distintivo

2. Resalta líneas estratégicamente:

   • Resalta solo las líneas más importantes
   • No resaltes más del 25% del código
   • Usa rangos (ej. 4-7) para secciones completas

3. Combina técnicas cuando sea necesario:

   • Usa contenedores para contexto general
   • Resalta líneas específicas dentro de los contenedores

4. Utiliza vp-code-group eficientemente:

   • Organiza contenido relacionado en tabs
   • Compara diferentes implementaciones o lenguajes
   • Mantén consistencia en los títulos de las pestañas

Tabs de Código (Grupos de Código)

VitePress tiene soporte incorporado para grupos de código con pestañas usando una sintaxis especial de Markdown. Esta funcionalidad permite organizar contenido relacionado, especialmente útil para mostrar diferentes lenguajes de programación o diferentes enfoques para un mismo problema.

Sintaxis básica

Para crear grupos de código con pestañas, usa la siguiente sintaxis:

<!-- Uso básico con diferentes lenguajes -->
::: code-group

```sh [npm]
npm install
```

```sh [pnpm]
pnpm install
```

```sh [yarn]
yarn install
```

```sh [bun]
bun install
```

:::

Ejemplo práctico

Instalación en diferentes gestores de paquetes

INFORMACIÓN

Propósito: Este ejemplo muestra cómo instalar el proyecto usando diferentes gestores de paquetes.

npm

npm install

pnpm

pnpm install

yarn

yarn install

bun

bun install

Ejemplo con diferentes lenguajes

CONSEJO

Consejo: Los grupos de código son perfectos para mostrar la misma implementación en diferentes lenguajes de programación.

Función para validar una CURP:

JavaScript

function validarCURP(curp) {
  const regex = /^[A-Z]{4}\d{6}[HM][A-Z]{5}[0-2]\d[A-Z]\d$/;
  return regex.test(curp);
}

Python

def validar_curp(curp):
  pattern = r'^[A-Z]{4}\d{6}[HM][A-Z]{5}[0-2]\d[A-Z]\d$'
  return bool(re.match(pattern, curp))

TypeScript

function validarCURP(curp: string): boolean {
  const regex = /^[A-Z]{4}\d{6}[HM][A-Z]{5}[0-2]\d[A-Z]\d$/;
  return regex.test(curp);
}

Uso con contenedores

ADVERTENCIA

Nota importante: Los grupos de código funcionan mejor cuando se combinan con contenedores para proporcionar contexto adicional.

Los grupos de código son especialmente útiles cuando necesitas mostrar diferentes formas de resolver el mismo problema:

• Comparar diferentes bibliotecas o frameworks
• Mostrar sintaxis equivalente en varios lenguajes
• Presentar soluciones alternativas a un problema
• Organizar contenido extenso en secciones manejables

Detalles

Detalles técnicos

Los grupos de código de VitePress generan automáticamente la estructura HTML con las clases:

• vp-code-group: Contenedor principal
• tabs: Contenedor de pestañas
• blocks: Contenedor de bloques de código
• language-*: Clases para cada bloque de código

Cada pestaña tiene un input de tipo radio y un label asociado para la navegación.