|
|
import{_ as a,c as i,ag as n,o as e}from"./chunks/framework.C1C4sYC0.js";const c=JSON.parse('{"title":"Extensiones Markdown","description":"","frontmatter":{},"headers":[],"relativePath":"es/guide/markdown.md","filePath":"es/guide/markdown.md","lastUpdated":1736187882000}'),l={name:"es/guide/markdown.md"};function t(p,s,h,d,o,r){return e(),i("div",null,s[0]||(s[0]=[n(`<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>`,188)]))}const g=a(l,[["render",t]]);export{c as __pageData,g as default};
|
