|
|
<!DOCTYPE html>
|
|
|
<html lang="es-CO" dir="ltr">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
<title>Extensiones Markdown | VitePress</title>
|
|
|
<meta name="description" content="Generador de Sitios Estaticos desarrollado con Vite y Vue.">
|
|
|
<meta name="generator" content="VitePress v1.6.4">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/assets/style.wBANWwE3.css" as="style">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/vp-icons.css" as="style">
|
|
|
<script type="module" src="/vitepress/v1/assets/chunks/metadata.1b805bca.js"></script>
|
|
|
<script type="module" src="/vitepress/v1/assets/app.ObmQnk_B.js"></script>
|
|
|
<link rel="preload" href="/vitepress/v1/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/theme.COmgkQ2m.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/framework.C1C4sYC0.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/es_guide_markdown.md.CztdpKzh.lean.js">
|
|
|
<link rel="icon" type="image/svg+xml" href="/vitepress-logo-mini.svg">
|
|
|
<link rel="icon" type="image/png" href="/vitepress-logo-mini.png">
|
|
|
<meta name="theme-color" content="#5f67ee">
|
|
|
<meta property="og:type" content="website">
|
|
|
<meta property="og:locale" content="en">
|
|
|
<meta property="og:title" content="VitePress | Vite & Vue Powered Static Site Generator">
|
|
|
<meta property="og:site_name" content="VitePress">
|
|
|
<meta property="og:image" content="https://vitepress.dev/vitepress-og.jpg">
|
|
|
<meta property="og:url" content="https://vitepress.dev/">
|
|
|
<script src="https://cdn.usefathom.com/script.js" data-site="AZBRSFGG" data-spa="auto" defer></script>
|
|
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app"><div class="Layout" data-v-24d6a1ec><!--[--><!--]--><!--[--><span tabindex="-1" data-v-6d358b95></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-6d358b95>Saltar al contenido</a><!--]--><!----><header class="VPNav" data-v-24d6a1ec data-v-a3bfa20d><div class="VPNavBar" data-v-a3bfa20d data-v-2e8dfb4b><div class="wrapper" data-v-2e8dfb4b><div class="container" data-v-2e8dfb4b><div class="title" data-v-2e8dfb4b><div class="VPNavBarTitle has-sidebar" data-v-2e8dfb4b data-v-ab8df553><a class="title" href="/vitepress/v1/es/" data-v-ab8df553><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vitepress/v1/vitepress-logo-mini.svg" width="24" height="24" alt data-v-857f4fa7><!--]--><span data-v-ab8df553>VitePress</span><!--[--><!--]--></a></div></div><div class="content" data-v-2e8dfb4b><div class="content-body" data-v-2e8dfb4b><!--[--><!--]--><div class="VPNavBarSearch search" data-v-2e8dfb4b><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Buscar"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Buscar</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-2e8dfb4b data-v-06cc176e><span id="main-nav-aria-label" class="visually-hidden" data-v-06cc176e> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vitepress/v1/es/guide/what-is-vitepress" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>Guia</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/v1/es/reference/site-config" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>Referencia</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-06cc176e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-d85ac99d><span class="text" data-v-d85ac99d><!----><span data-v-d85ac99d>1.6.4</span><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><div class="items" data-v-c8d7041b><!--[--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>Registro de cambios</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/.github/contributing.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>Contribuir</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-2e8dfb4b data-v-492a0c8e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Cambiar Idioma" data-v-d85ac99d><span class="text" data-v-d85ac99d><span class="vpi-languages option-icon" data-v-d85ac99d></span><!----><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="items" data-v-492a0c8e><p class="title" data-v-492a0c8e>Español</p><!--[--><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>English</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/zh/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>简体中文</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-2e8dfb4b data-v-27fdb0e5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-27fdb0e5 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-2e8dfb4b data-v-331b41bb data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-2e8dfb4b data-v-cc29fe84 data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-d85ac99d><span class="vpi-more-horizontal icon" data-v-d85ac99d></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="group translations" data-v-cc29fe84><p class="trans-title" data-v-cc29fe84>Español</p><!--[--><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>English</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/zh/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>简体中文</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/markdown" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><div class="group" data-v-cc29fe84><div class="item appearance" data-v-cc29fe84><p class="label" data-v-cc29fe84>Tema Oscuro</p><div class="appearance-action" data-v-cc29fe84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-cc29fe84 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div></div></div><div class="group" data-v-cc29fe84><div class="item social-links" data-v-cc29fe84><div class="VPSocialLinks social-links-list" data-v-cc29fe84 data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-2e8dfb4b data-v-8a503b11><span class="container" data-v-8a503b11><span class="top" data-v-8a503b11></span><span class="middle" data-v-8a503b11></span><span class="bottom" data-v-8a503b11></span></span></button></div></div></div></div><div class="divider" data-v-2e8dfb4b><div class="divider-line" data-v-2e8dfb4b></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-24d6a1ec data-v-dbd97c1a><div class="container" data-v-dbd97c1a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-dbd97c1a><span class="vpi-align-left menu-icon" data-v-dbd97c1a></span><span class="menu-text" data-v-dbd97c1a>Menu Lateral</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbd97c1a data-v-2aa020d0><button data-v-2aa020d0>Volver arriba</button><!----></div></div></div><aside class="VPSidebar" data-v-24d6a1ec data-v-38fc5113><div class="curtain" data-v-38fc5113></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-38fc5113><span class="visually-hidden" id="sidebar-aria-label" data-v-38fc5113> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Introducción</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/what-is-vitepress" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Qué es VitePress？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/getting-started" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Iniciando</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/routing" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Enrutamiento</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/deploy" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Despliegue</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible has-active" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Escribiendo</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/markdown" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Extensiones Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/asset-handling" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Manejo de assets</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/frontmatter" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Frontmatter</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/using-vue" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Usando Vue en Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/i18n" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Internacionalización</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Pesonalización</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/custom-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Usando un tema personalizado</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/extending-default-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Extendiendo el tema por defecto</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/data-loading" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Carga de datos en tiempo de compilación</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/ssr-compat" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Compatibilidad SSR</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/cms" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Conectando a un CMS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Experimental</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/mpa-mode" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Modo MPA</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/guide/sitemap-generation" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Generación de Sitemap</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0" data-v-0d029714 data-v-132a47f9><!----><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/es/reference/site-config" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Configuración y Referencia del API</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-24d6a1ec data-v-c002ede2><div class="VPDoc has-sidebar has-aside" data-v-c002ede2 data-v-b83d2fb8><!--[--><!--]--><div class="container" data-v-b83d2fb8><div class="aside" data-v-b83d2fb8><div class="aside-curtain" data-v-b83d2fb8></div><div class="aside-container" data-v-b83d2fb8><div class="aside-content" data-v-b83d2fb8><div class="VPDocAside" data-v-b83d2fb8 data-v-3117dd8f><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3117dd8f data-v-8f1cb326><div class="content" data-v-8f1cb326><div class="outline-marker" data-v-8f1cb326></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8f1cb326>En esta página</div><ul class="VPDocOutlineItem root" data-v-8f1cb326 data-v-999189d2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3117dd8f></div><!--[--><!--]--><div class="VPDocAsideCarbonAds" data-v-3117dd8f><div class="VPCarbonAds" data-v-5c72d9ad></div></div><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-b83d2fb8><div class="content-container" data-v-b83d2fb8><!--[--><!--]--><main class="main" data-v-b83d2fb8><div style="position:relative;" class="vp-doc _vitepress_v1_es_guide_markdown" data-v-b83d2fb8><div><h1 id="markdown-extensions" tabindex="-1">Extensiones Markdown <a class="header-anchor" href="#markdown-extensions" aria-label="Permalink to "Extensiones Markdown {#markdown-extensions}""></a></h1><p>VitePress viene con Extensiones embutidas.</p><h2 id="header-anchors" tabindex="-1">Anchors de Header <a class="header-anchor" href="#header-anchors" aria-label="Permalink to "Anchors de Header {#header-anchors}""></a></h2><p>Los Header reciben la aplicación automáticamente de links anchor. La presentación de los anchor puede ser configurada usando la opción <code>markdown.anchor</code>.</p><h3 id="custom-anchors" tabindex="-1">Anchor personalizados <a class="header-anchor" href="#custom-anchors" aria-label="Permalink to "Anchor personalizados {#custom-anchors}""></a></h3><p>Para especificar un <em>tag</em> anchor personalizado para um header en vex de usar la generada automáticamente, adicione un sufijo al header:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># Usando anchors personalizados {#mi-anchor}</span></span></code></pre></div><p>Esto permite que tenga un link del header como <code>#mi-anchor</code> en vez del default <code>#usando-anchors-personalizados</code>.</p><h2 id="links" tabindex="-1">Links <a class="header-anchor" href="#links" aria-label="Permalink to "Links {#links}""></a></h2><p>Ambos links internos y externos reciben tratamiento especial.</p><h3 id="internal-links" tabindex="-1">Links Internos <a class="header-anchor" href="#internal-links" aria-label="Permalink to "Links Internos {#internal-links}""></a></h3><p>Los links internos son convertidos en links de enrutador para navegación SPA. Además de eso , todo archivo <code>index.md</code> contenido en cada subdirectorio será automáticamente convertido en <code>index.html</code>, con la URL correspondiente <code>/</code>.</p><p>Por ejemplo, dada la siguiente estructura de directorios:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ index.md</span></span>
|
|
|
<span class="line"><span>├─ foo</span></span>
|
|
|
<span class="line"><span>│ ├─ index.md</span></span>
|
|
|
<span class="line"><span>│ ├─ one.md</span></span>
|
|
|
<span class="line"><span>│ └─ two.md</span></span>
|
|
|
<span class="line"><span>└─ bar</span></span>
|
|
|
<span class="line"><span> ├─ index.md</span></span>
|
|
|
<span class="line"><span> ├─ three.md</span></span>
|
|
|
<span class="line"><span> └─ four.md</span></span></code></pre></div><p>Y suponiendo que está en <code>foo/one.md</code>:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Página Inicial</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- lleva al usuario al index.md raiz --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/foo/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- lleva al usuario al index.html del directorio foo --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">foo heading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./#heading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- ancla al usuario a un header del archivo índice foo --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">bar - three</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../bar/three</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- puede omitir la extensión --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">bar - three</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../bar/three.md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- puede adicionar .md --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">bar - four</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../bar/four.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- o puede adicionar .html --></span></span></code></pre></div><h3 id="page-suffix" tabindex="-1">Sufijo de Página <a class="header-anchor" href="#page-suffix" aria-label="Permalink to "Sufijo de Página {#page-suffix}""></a></h3><p>Páginas y links internos son generados con el sufijo <code>.html</code> por defecto.</p><h3 id="external-links" tabindex="-1">Links Externos <a class="header-anchor" href="#external-links" aria-label="Permalink to "Links Externos {#external-links}""></a></h3><p>Links externos reciben automáticamente <code>target="_blank" rel="noreferrer"</code>:</p><ul><li><a href="https://vuejs.org" target="_blank" rel="noreferrer">vuejs.org</a></li><li><a href="https://github.com/vuejs/vitepress" target="_blank" rel="noreferrer">VitePress no GitHub</a></li></ul><h2 id="frontmatter" tabindex="-1">Frontmatter <a class="header-anchor" href="#frontmatter" aria-label="Permalink to "Frontmatter {#frontmatter}""></a></h2><p><a href="https://jekyllrb.com/docs/front-matter/" target="_blank" rel="noreferrer">YAML frontmatter</a> es soportado por defecto:</p><div class="language-yaml vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">yaml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">título</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Escribiendo como un Hacker</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">idioma</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">es-CO</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">---</span></span></code></pre></div><p>Esos datos estarán disponibles para el resto de la página, junto con todos los componentes personalizados y de temas.</p><p>Para más detalles, vea <a href="./../reference/frontmatter-config">Frontmatter</a>.</p><h2 id="github-style-tables" tabindex="-1">Tablas al Estilo GitHub <a class="header-anchor" href="#github-style-tables" aria-label="Permalink to "Tablas al Estilo GitHub {#github-style-tables}""></a></h2><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| Tablas | Son | Geniales|</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| ------------- | :-----------: | ----: |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| col 3 está | à direita | $1600 |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| col 2 está | centralizada | $12 |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| listras | são legais | $1 |</span></span></code></pre></div><p><strong>Salida</strong></p><table tabindex="0"><thead><tr><th>Tablas</th><th style="text-align:center;">Son</th><th style="text-align:right;">Geniales</th></tr></thead><tbody><tr><td>col 3 está</td><td style="text-align:center;">à direita</td><td style="text-align:right;">$1600</td></tr><tr><td>col 2 está</td><td style="text-align:center;">centralizada</td><td style="text-align:right;">$12</td></tr><tr><td>listras</td><td style="text-align:center;">são legais</td><td style="text-align:right;">$1</td></tr></tbody></table><h2 id="emoji" tabindex="-1">Emoji 🎉 <a class="header-anchor" href="#emoji" aria-label="Permalink to "Emoji :tada:""></a></h2><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>:tada: :100:</span></span></code></pre></div><p><strong>Salida</strong></p><p>🎉 💯</p><p>Una <a href="https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs" target="_blank" rel="noreferrer">lista de todos los emojis</a> está disponible.</p><h2 id="tabla-de-contenido-toc" tabindex="-1">Tabla de Contenido (TOC) <a class="header-anchor" href="#tabla-de-contenido-toc" aria-label="Permalink to "Tabla de Contenido (TOC)""></a></h2><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[[toc]]</span></span></code></pre></div><p><strong>Salida</strong></p><nav class="table-of-contents"><ul><li><a href="#header-anchors">Anchors de Header</a><ul><li><a href="#custom-anchors">Anchor personalizados</a></li></ul></li><li><a href="#links">Links</a><ul><li><a href="#internal-links">Links Internos</a></li><li><a href="#page-suffix">Sufijo de Página</a></li><li><a href="#external-links">Links Externos</a></li></ul></li><li><a href="#frontmatter">Frontmatter</a></li><li><a href="#github-style-tables">Tablas al Estilo GitHub</a></li><li><a href="#emoji">Emoji 🎉</a></li><li><a href="#tabla-de-contenido-toc">Tabla de Contenido (TOC)</a></li><li><a href="#custom-containers">Contenedores Personalizados</a><ul><li><a href="#default-title">Título por Defecto</a></li><li><a href="#custom-title">Título Personalizado</a></li><li><a href="#raw">raw</a></li></ul></li><li><a href="#github-flavored-alerts">Alertas en estilo GitHub</a></li><li><a href="#syntax-highlighting-in-code-blocks">Destaque de Sintaxis en Bloques de Código</a></li><li><a href="#line-highlighting-in-code-blocks">Destaque de Linea en Bloques de Código</a></li><li><a href="#focus-in-code-blocks">Enfoque en Bloques de Código</a></li><li><a href="#colored-diffs-in-code-blocks">Diferencias Coloreadas en Bloques de Código</a></li><li><a href="#errors-and-warnings-in-code-blocks">Errores y Avisos en Bloques de Código</a></li><li><a href="#line-numbers">Números de Linea</a></li><li><a href="#import-code-snippets">Importar Snippets de Código</a></li><li><a href="#code-groups">Grupos de Código</a></li><li><a href="#markdown-file-inclusion">Inclusión de Archivo Markdown</a></li></ul></nav><p>La presentación de TOC (Table of Contents) puede ser configurada usando la opción <code>markdown.toc</code>.</p><h2 id="custom-containers" tabindex="-1">Contenedores Personalizados <a class="header-anchor" href="#custom-containers" aria-label="Permalink to "Contenedores Personalizados {#custom-containers}""></a></h2><p>Contenedores personalizados pueden ser definidos por sus tipos, títulos y contenidos.</p><h3 id="default-title" tabindex="-1">Título por Defecto <a class="header-anchor" href="#default-title" aria-label="Permalink to "Título por Defecto {#default-title}""></a></h3><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: info</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Este es un bloque de información.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: tip</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Este es un aviso.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: warning</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Esto es una advertencia.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: danger</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Este es un aviso de peligro.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: details</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Este es un bloque de detalles.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span></code></pre></div><p><strong>Salida</strong></p><div class="info custom-block"><p class="custom-block-title">INFO</p><p>Este es un bloque de información.</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Este es un aviso.</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Esto es una advertencia.</p></div><div class="danger custom-block"><p class="custom-block-title">DANGER</p><p>Este es un aviso de peligro.</p></div><details class="details custom-block"><summary>Details</summary><p>Este es un bloque de detalles.</p></details><h3 id="custom-title" tabindex="-1">Título Personalizado <a class="header-anchor" href="#custom-title" aria-label="Permalink to "Título Personalizado {#custom-title}""></a></h3><p>Puede definir un título personalizado adicionando el texto inmediatamente después del "tipo" del recipiente.</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: danger STOP</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Zona de peligro, no siga</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: details Click para ver el código</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```js</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hola, VitePress!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>:::</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span></span></span></code></pre></div><p><strong>Salida</strong></p><div class="danger custom-block"><p class="custom-block-title">STOP</p><p>Zona de peligro, no siga</p></div><details class="details custom-block"><summary>Click para ver el código</summary><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hola, VitePress!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><p>Además de eso, puede definir títulos personalizados globalmente adicionando el siguiente contenifo en el archivo de configuración del sitio, útil si no estuviera escribiendo en ingles:</p><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// config.ts</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdown: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tipLabel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'提示'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> warningLabel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'警告'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dangerLabel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'危险'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> infoLabel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'信息'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> detailsLabel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'详细信息'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="raw" tabindex="-1"><code>raw</code> <a class="header-anchor" href="#raw" aria-label="Permalink to "`raw`""></a></h3><p>Este es un recipiente especial que puee ser usado para evitar conflictos de estilo y enrutador con VitePress. Esto es especialmente útil al documentar bibliotecas de componentes. Puede tambien verificar <a href="https://whyframe.dev/docs/integrations/vitepress" target="_blank" rel="noreferrer">whyframe</a> para mejor aislamiento.</p><p><strong>Sintaxis</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: raw</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Envuelve en un <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"vp-raw"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span></code></pre></div><p>La clase <code>vp-raw</code> también puede ser usada directamente en elementos. El aislamiento de estilo es actualmente opcional:</p><ul><li><p>Instale <code>postcss</code> con su gestor de paquetes preferido:</p><div class="language-sh vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> postcss</span></span></code></pre></div></li><li><p>Cree un archivo llamado <code>docs/postcss.config.mjs</code> y adicione lo siguiente:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { postcssIsolateStyles } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">postcssIsolateStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>El utiliza <a href="https://github.com/postcss/postcss-load-config" target="_blank" rel="noreferrer"><code>postcss-prefix-selector</code></a> internamente. Puede pasar opciones así:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">postcssIsolateStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> includeFiles: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">vp-doc</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\.</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// o padrão é /base\.css/</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div></li></ul><h2 id="github-flavored-alerts" tabindex="-1">Alertas en estilo GitHub <a class="header-anchor" href="#github-flavored-alerts" aria-label="Permalink to "Alertas en estilo GitHub {#github-flavored-alerts}""></a></h2><p>VitePress también soporta <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" target="_blank" rel="noreferrer">alertas en estilo GitHub</a> para presentar como un bloque de llamada. Ellos serán presentados de la misma forma que <a href="#custom-containers">elementos personalizados</a>.</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> [</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">!NOTE</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> [</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">!TIP</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> Informaciones opcionales para ayudar al usuario a tener más éxito.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> [</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">!IMPORTANT</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> Informaciones cruciales necesarias par que los usuarios tengan éxito.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> [</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">!WARNING</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> Contenido critico exigiendo atención inmediata del usuario debido a riesgos potenciales.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> [</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">!CAUTION</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">> Potenciales consecuencias negativas de una acción.</span></span></code></pre></div><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.</p></div><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>Informaciones opcionales para ayudar al usuario a tener más éxito.</p></div><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>Informaciones cruciales necesarias par que los usuarios tengan éxito.</p></div><div class="warning custom-block github-alert"><p class="custom-block-title">WARNING</p><p>Contenido critico exigiendo atención inmediata del usuario debido a riesgos potenciales.</p></div><div class="caution custom-block github-alert"><p class="custom-block-title">CAUTION</p><p>Potenciales consecuencias negativas de una acción.</p></div><h2 id="syntax-highlighting-in-code-blocks" tabindex="-1">Destaque de Sintaxis en Bloques de Código <a class="header-anchor" href="#syntax-highlighting-in-code-blocks" aria-label="Permalink to "Destaque de Sintaxis en Bloques de Código {#syntax-highlighting-in-code-blocks}""></a></h2><p>VitePress utiliza <a href="https://github.com/shikijs/shiki" target="_blank" rel="noreferrer">Shiki</a> para destacar la sintaxis del lenguaje en bloques de código Markdown, usando texto coloreado. Shiki soporta una amplia variedad de lenguajes de programación. Todo lo que necesita es adicionar un <em>alias</em> de lenguaje válido después de los backticks iniciales del bloque de código:</p><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> name: 'MyComponent',</span></span>
|
|
|
<span class="line"><span> // ...</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```html</span></span>
|
|
|
<span class="line"><span><ul></span></span>
|
|
|
<span class="line"><span> <li v-for="todo in todos" :key="todo.id"></span></span>
|
|
|
<span class="line"><span> {{ todo.text }}</span></span>
|
|
|
<span class="line"><span> </li></span></span>
|
|
|
<span class="line"><span></ul></span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'MyComponent'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"todo in todos"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"todo.id"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {{ todo.text }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>Una <a href="https://shiki.style/languages" target="_blank" rel="noreferrer">lista de lenguajes válidas</a> está disponible en el repositório Shiki.</p><p>También puede personalizar el tema de destaque de sintaxis en la configuración de la aplicación. Consulte las <a href="./../reference/site-config#markdown">opciones <code>markdown</code></a> para más detalles.</p><h2 id="line-highlighting-in-code-blocks" tabindex="-1">Destaque de Linea en Bloques de Código <a class="header-anchor" href="#line-highlighting-in-code-blocks" aria-label="Permalink to "Destaque de Linea en Bloques de Código {#line-highlighting-in-code-blocks}""></a></h2><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js{4}</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: 'Destacado!'</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Destacado!'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Además de una única linea, puede también especificar múltiples lineas únicas, intervalos, o ambos:</p><ul><li>Intervalos de linea: por ejemplo, <code>{5-8}</code>, <code>{3-10}</code>, <code>{10-17}</code></li><li>Múltiples lineas únicas: por ejemplo, <code>{4,7,9}</code></li><li>Intervalos de linea y lineas únicas: por ejemplo, <code>{4,7-13,16,23-27,40}</code></li></ul><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js{1,4,6-8}</span></span>
|
|
|
<span class="line"><span>export default { // Destacado</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: `Destacado!</span></span>
|
|
|
<span class="line"><span> Esta linea no está destacada,</span></span>
|
|
|
<span class="line"><span> pero esta y las próximas están.`,</span></span>
|
|
|
<span class="line"><span> motd: 'VitePress es increible',</span></span>
|
|
|
<span class="line"><span> lorem: 'ipsum'</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Destacado</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`Destacado!</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> Esta linea no está destacada,</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pero esta y las próximas están.`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> motd: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'VitePress es increible'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lorem: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ipsum'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Alternativamente, es posible destacar directamente en la linea usando el comentario <code>// [!code highlight]</code>.</p><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: 'Destacado!' // [!code highlight]</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Saída</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark has-highlighted vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Destacado!'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="focus-in-code-blocks" tabindex="-1">Enfoque en Bloques de Código <a class="header-anchor" href="#focus-in-code-blocks" aria-label="Permalink to "Enfoque en Bloques de Código {#focus-in-code-blocks}""></a></h2><p>Adicionando el comentario <code>// [!code focus]</code> en una linea, esta será destacada y desenfocará las otras partes del código.</p><p>Además, puede definir el número de lineas para enfocar usando <code>// [!code focus:<lineas>]</code>.</p><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: 'Enfocado!' // [!code focus]</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark has-focused-lines vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line has-focus"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Enfocado!'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="colored-diffs-in-code-blocks" tabindex="-1">Diferencias Coloreadas en Bloques de Código <a class="header-anchor" href="#colored-diffs-in-code-blocks" aria-label="Permalink to "Diferencias Coloreadas en Bloques de Código {#colored-diffs-in-code-blocks}""></a></h2><p>Adicionar los comentarios <code>// [!code --]</code> o <code>// [!code ++]</code> en una linea creará una diferencia en esa linea, manteniendo los colores del bloque de código.</p><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: 'Borrado' // [!code --]</span></span>
|
|
|
<span class="line"><span> msg: 'Adicionado' // [!code ++]</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark has-diff vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line diff remove"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Borrado'</span></span>
|
|
|
<span class="line diff add"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Adicionado'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="errors-and-warnings-in-code-blocks" tabindex="-1">Errores y Avisos en Bloques de Código <a class="header-anchor" href="#errors-and-warnings-in-code-blocks" aria-label="Permalink to "Errores y Avisos en Bloques de Código {#errors-and-warnings-in-code-blocks}""></a></h2><p>Adicionar los comentarios <code>// [!code warning]</code> o <code>// [!code error]</code> en una linea coloreará los bloques conforme necesário.</p><p><strong>Entrada</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>```js</span></span>
|
|
|
<span class="line"><span>export default {</span></span>
|
|
|
<span class="line"><span> data () {</span></span>
|
|
|
<span class="line"><span> return {</span></span>
|
|
|
<span class="line"><span> msg: 'Error', // [!code error]</span></span>
|
|
|
<span class="line"><span> msg: 'Aviso' // [!code warning]</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span> }</span></span>
|
|
|
<span class="line"><span>}</span></span>
|
|
|
<span class="line"><span>```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark has-highlighted vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line highlighted error"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
|
|
<span class="line highlighted warning"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> msg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Aviso'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="line-numbers" tabindex="-1">Números de Linea <a class="header-anchor" href="#line-numbers" aria-label="Permalink to "Números de Linea {#line-numbers}""></a></h2><p>Puede habilitar números de linea para cada bloque de código a través del archivo de configuración:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdown: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lineNumbers: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Consulte las <a href="./../reference/site-config#markdown">opciones markdown</a> para más detalles.</p><p>Puede adicionar la marca <code>:line-numbers</code> / <code>:no-line-numbers</code> en sus bloques de código para substituir el valor definido en la configuración.</p><p>También puede personalizar el número inicial de linea adicionando <code>=</code> después <code>:line-numbers</code>. Por ejemplo, <code>:line-numbers=2</code> significa que los números de las lineas en los bloques de código comenzarán a partir de <code>2</code>.</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```ts {1}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea desactivados por defecto</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 2'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```ts:line-numbers {1}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea activados</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 2'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```ts:line-numbers=2 {1}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea activados y comienzan en 2</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 4'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea desactivados por defecto</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 2'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span></code></pre></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea activados</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 2'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// números de linea activados y comienzan en 2</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 3'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Esta es la linea 4'</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="import-code-snippets" tabindex="-1">Importar <em>Snippets</em> de Código <a class="header-anchor" href="#import-code-snippets" aria-label="Permalink to "Importar _Snippets_ de Código {#import-code-snippets}""></a></h2><p>Puede importar pedazos de código de archivos existentes usando la siguiente sintaxis:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/filepath</span></span></code></pre></div><p>También soporta <a href="#line-highlighting-in-code-blocks">destaque de linea</a>:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/filepath{highlightLines}</span></span></code></pre></div><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet.js{2}</span></span></code></pre></div><p><strong>Archivo de Código</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>El valor de <code>@</code> corresponde a la raiz del código fuente. Por defecto, es la raiz del proyecto VitePress, a menos que <code>srcDir</code> sea configurado. Alternativamente, puede también importar de paths relativos:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< ../snippets/snippet.js</span></span></code></pre></div></div><p>También puede usar una <a href="https://code.visualstudio.com/docs/editor/codebasics#_folding" target="_blank" rel="noreferrer">región VS Code</a> para incluir apenas la parte correspondiente del archivo de código. Puede proporcionar un nombre de región personalizado después de <code>#</code> siguiendo el path del archivo:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet-with-region.js#snippet{1}</span></span></code></pre></div><p><strong>Archivo de Código</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// #region snippet</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// #endregion snippet</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> foo</span></span></code></pre></div><p><strong>Salida</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>También puede especificar el idioma dentro de llaves (<code>{}</code>), así:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet.cs{c#}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- con destaque de linea: --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet.cs{1,2,4-6 c#}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- con números de linea: --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}</span></span></code></pre></div><p>Esto es útil si el lenguaje original no puede ser inferida por la extensión de archivo.</p><h2 id="code-groups" tabindex="-1">Grupos de Código <a class="header-anchor" href="#code-groups" aria-label="Permalink to "Grupos de Código {#code-groups}""></a></h2><p>Puede agrupar varios bloques de código así:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: code-group</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```js [config.js]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import('vitepress').UserConfig}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```ts [config.ts]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span></code></pre></div><p><strong>Salída</strong></p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-LrNx_" id="tab-wCGdXl3" checked><label data-title="config.js" for="tab-wCGdXl3">config.js</label><input type="radio" name="group-LrNx_" id="tab-th4USHU"><label data-title="config.ts" for="tab-th4USHU">config.ts</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import('vitepress').UserConfig}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config</span></span></code></pre></div></div></div><p>También puede <a href="#import-code-snippets">importar <em>snippets</em> de código</a> en grupos de código:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::: code-group</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- nombre de archivo usado como título por defecto --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet.js</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- puede proporcionar uno personalizado también --></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:::</span></span></code></pre></div><p><strong>Output</strong></p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-XD0pN" id="tab-zBfhU80" checked><label data-title="snippet.js" for="tab-zBfhU80">snippet.js</label><input type="radio" name="group-XD0pN" id="tab-A2nCzdJ"><label data-title="snippet with region" for="tab-A2nCzdJ">snippet with region</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ..</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div><h2 id="markdown-file-inclusion" tabindex="-1">Inclusión de Archivo Markdown <a class="header-anchor" href="#markdown-file-inclusion" aria-label="Permalink to "Inclusión de Archivo Markdown {#markdown-file-inclusion}""></a></h2><p>Puede incluir un archivo markdown en otro archvo markdown, incluso anidado.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Puede prefijar el path del markdown con <code>@</code>, el actuará como la raiz de origen. Por defecto, es la raiz del projecto VitePress, a menos que <code>srcDir</code> sea configurado.</p></div><p>Por ejemplo, puede incluir un archivo markdown relativo usando esto:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># Documentación</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## Conceptos Básicos</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!--@include: ./parts/basics.md--></span></span></code></pre></div><p><strong>Archivo de Parte</strong> (<code>parts/basics.md</code>)</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Algunas cosas básicas.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">### Configuración</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Puede ser creada usando </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`.foorc.json`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span></span></code></pre></div><p><strong>Código Equivalente</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># Documentación</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## Conceptos básicos</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Algunas cosas básicas</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">### Configuración</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Puede ser creada usando </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`.foorc.json`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span></span></code></pre></div><p>También soporta la selección de un intervalo de lineas:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># Documentación</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## Conceptos Básicos</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!--@include: ./parts/basics.md{3,}--></span></span></code></pre></div><p><strong>Archivo de Parte</strong> (<code>parts/basics.md</code>)</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Algunas cosas básicas.</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">### Configuración</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Puede ser creada usando </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`.foorc.json`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span></span></code></pre></div><p><strong>Código Equivalente</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># Documentación</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## Conceptos Básicos</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">### Configuración</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Puede ser creada usando </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`.foorc.json`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span></span></code></pre></div><p>El formato del intervalo de lineas seleccionado puede ser: <code>{3,}</code>, <code>{,10}</code>, <code>{1,10}</code></p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Observe que esto no genera errores si el archivo no está presente. Por lo tanto, al usar este recurso, asegurese de que el contenido está siendo mostrado como se espera.:::</p><h2 id="math-equations" tabindex="-1">Ecuaciones Matemáticas <a class="header-anchor" href="#math-equations" aria-label="Permalink to "Ecuaciones Matemáticas {#math-equations}""></a></h2><p>Esto es actualmente opcional. Para activarlo, necesita instalar <code>markdown-it-mathjax3</code> y definir <code>markdown.math</code> como <code>true</code> en su archivo de configuración:</p><div class="language-sh vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> markdown-it-mathjax3</span></span></code></pre></div><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/config.ts">.vitepress/config.ts</span></div><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdown: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> math: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Cuando $a \ne 0$, existen dos soluciones para $(ax^2 + bx + c = 0)$ y ellas son</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;">**Ecuaciones de Maxwell:**</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| ecuación | descripción |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \cdot \vec{\mathbf{B}} = 0$ | la divergencia de $\vec{\mathbf{B}}$ es cero |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | </span><span style="--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic;">_hã?_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;">**Salída**</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Cuando $a \ne 0$, existen dos soluciones para $(ax^2 + bx + c = 0)$ y ellas son</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;">**Ecuaciones de Maxwell:**</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| ecuación | descripción |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \cdot \vec{\mathbf{B}} = 0$ | la divergencia de $\vec{\mathbf{B}}$ es cero |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | </span><span style="--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic;">_hã?_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## </span><span style="--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic;">_Lazy Loading_</span><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"> de Imagenes {#image-lazy-loading}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Puede activar la "carga perezosa" para cada imagen adicionada via markdown definiendo </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`lazyLoading`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> como </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`true`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> en su archivo de configuración:</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```js</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdown: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> image: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // la carga perezosa de imagenes está desactivada por defecto</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lazyLoading: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="advanced-configuration" tabindex="-1">Configuración Avanzada <a class="header-anchor" href="#advanced-configuration" aria-label="Permalink to "Configuración Avanzada {#advanced-configuration}""></a></h2><p>VitePress usa <a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noreferrer">markdown-it</a> como interprete Markdown. Muchas de las extensiones arriba son implementadas por medio de <em>plugins</em> personalizados. Puede personalizar más la instancia <code>markdown-it</code> usando la opción <code>markdown</code> en <code>.vitepress/config.js</code>:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdownItAnchor </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'markdown-it-anchor'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdownItFoo </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'markdown-it-foo'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> markdown: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // opciones para markdown-it-anchor</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // https://github.com/valeriangalliat/markdown-it-anchor#usage</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> anchor: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> permalink: markdownItAnchor.permalink.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">headerLink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // opciones para @mdit-vue/plugin-toc</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> toc: { level: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] },</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // use más plugins markdown-it!</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> md.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(markdownItFoo)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>Consulte la lista completa de propiedades configurables en <a href="./../reference/site-config#markdown">Referencia de Configuración: Configuración de la Aplicación</a>.</p></div></div></div></main><footer class="VPDocFooter" data-v-b83d2fb8 data-v-9e12100f><!--[--><!--]--><div class="edit-info" data-v-9e12100f><div class="edit-link" data-v-9e12100f><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/vuejs/vitepress/edit/main/docs/es/guide/markdown.md" target="_blank" rel="noreferrer" data-v-9e12100f><!--[--><span class="vpi-square-pen edit-link-icon" data-v-9e12100f></span> Editar esta página en GitHub<!--]--></a></div><div class="last-updated" data-v-9e12100f><p class="VPLastUpdated" data-v-9e12100f data-v-3eb659aa>Actualizado en: <time datetime="2025-01-06T18:24:42.000Z" data-v-3eb659aa></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9e12100f><span class="visually-hidden" id="doc-footer-aria-label" data-v-9e12100f>Pager</span><div class="pager" data-v-9e12100f><a class="VPLink link pager-link prev" href="/vitepress/v1/es/guide/deploy" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>Anterior</span><span class="title" data-v-9e12100f>Despliegue</span><!--]--></a></div><div class="pager" data-v-9e12100f><a class="VPLink link pager-link next" href="/vitepress/v1/es/guide/asset-handling" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>Siguiente</span><span class="title" data-v-9e12100f>Manejo de assets</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-24d6a1ec data-v-3be7d130><div class="container" data-v-3be7d130><p class="message" data-v-3be7d130>Liberado bajo la licencia MIT</p><p class="copyright" data-v-3be7d130>Derechos reservados © 2019-2025 Evan You</p></div></footer><!--[--><!--]--></div></div>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html> |
