Características

VitePress ofrece muchas características poderosas para crear documentación de alta calidad.

Markdown Mejorado

VitePress extiende la sintaxis estándar de Markdown con características adicionales.

Enlaces

Los enlaces internos son automáticamente convertidos a enlaces de navegación:

[Ir a la introducción](./introduccion.md)
[Ver API](../api/referencia.md)

Tabla de Contenidos

Puedes insertar una tabla de contenidos automática:

[[toc]]

Contenedores Personalizados

Información

Este es un bloque de información

Consejo

Este es un consejo útil

Advertencia

Este es un mensaje de advertencia

Peligro

Este es un mensaje de peligro

Haz clic para expandir

Este contenido está oculto hasta que se haga clic

Bloques de Código Avanzados

Resaltado de Sintaxis

VitePress usa Shiki para resaltar sintaxis:

interface User {
  name: string
  age: number
}

function greet(user: User): string {
  return `Hello, ${user.name}!`
}

Resaltado de Líneas

Resalta líneas específicas con {líneas}:

export default {
  data() {  // línea resaltada
    return {
      msg: 'Highlighted!'  // estas líneas
      // también están
      // resaltadas
    }
  }
}

Números de Línea

Los números de línea están habilitados por defecto. Puedes deshabilitarlos:

// Sin números de línea
const message = 'Hello'

Título del Código

export default {
  title: 'Mi Sitio'
}

Grupos de Código

config.js

export default {
  name: 'JavaScript'
}

config.ts

export default {
  name: 'TypeScript'
}

Importación de Fragmentos de Código

Puedes importar fragmentos de código desde archivos:

<<< @/ruta/al/archivo.js{1,3-5}

Componentes Vue

VitePress te permite usar componentes Vue directamente en Markdown:

Contador interactivo:

Código del componente anterior:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<button @click="count++">
  Contador: {{ count }}
</button>

Frontmatter

Usa YAML frontmatter para configurar la página:

---
title: Título Personalizado
description: Descripción personalizada
layout: doc
---

# Contenido de la página

Opciones de Layout

• doc - Layout de documentación (por defecto)
• home - Layout de página de inicio
• page - Layout de página personalizada

Búsqueda

VitePress incluye búsqueda local incorporada. Los usuarios pueden buscar presionando / o haciendo clic en el icono de búsqueda.

Internacionalización (i18n)

VitePress soporta sitios multiidioma:

export default defineConfig({
  locales: {
    root: {
      label: 'Español',
      lang: 'es'
    },
    en: {
      label: 'English',
      lang: 'en',
      link: '/en/'
    }
  }
})

Tema Oscuro

El tema oscuro está incluido por defecto. Los usuarios pueden alternar entre modo claro y oscuro.

Edición en GitHub

Habilita enlaces de edición para cada página:

themeConfig: {
  editLink: {
    pattern: 'https://github.com/user/repo/edit/main/docs/:path',
    text: 'Editar esta página en GitHub'
  }
}

Última Actualización

Muestra la marca de tiempo de la última actualización:

themeConfig: {
  lastUpdated: {
    text: 'Actualizado el',
    formatOptions: {
      dateStyle: 'short',
      timeStyle: 'short'
    }
  }
}

PWA (Progressive Web App)

Puedes convertir tu sitio en una PWA instalando el plugin oficial:

npm install -D @vitepress/plugin-pwa

Analytics

Integra fácilmente servicios de analytics como Google Analytics:

export default defineConfig({
  head: [
    ['script', { 
      async: '', 
      src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' 
    }]
  ]
})

Próximos Pasos

• Aprende sobre configuración avanzada
• Explora ejemplos de API