Slidev

Sintaxis de Markdown

Las diapositivas se escriben dentro de un único archivo markdown (por defecto ./slides.md).

Puedes utilizar las características de Markdown como lo harías normalmente, con soporte adicional de HTML en línea y componentes de Vue. También se admite el estilo utilizando Windi CSS. Utiliza --- separado con una nueva línea para dividir tus diapositivas.

# Slidev

¡Hola, mundo!

---

# Página 2

Usa directamente bloques de código para el resaltado

//```ts
console.log('¡Hola, mundo!')
//```

---

# Página 3

Puedes utilizar directamente Windi CSS y los componentes de Vue para estilizar y enriquecer tus diapositivas.

<div class="p-3">
  <Tweet id="20" />
</div>

Front Matter y plantillas

Puedes especificar plantillas y otros metadatos para cada diapositiva convirtiendo los separadores en bloques de Front Matter. Cada bloque de entrada comienza con un guión triple y termina con otro. Los textos entre ellos son objetos de datos en formato YAML. Por ejemplo:

---
layout: cover
---

# Slidev

Esta es la página de portada

---
layout: centrado
background: './images/background-1.png'
class: 'text-white'
---​

# Página 2

Esta es una página con la plantilla `centrado` y una imagen de fondo.

---

# Página 3

Esta es la página por defecto sin ningún metadato adicional.

Revisa la página de personalización para más detalles.

Bloques de código

Una gran razón por la que estoy construyendo Slidev es la necesidad de hacer que mi código se vea bien en las diapositivas. Así que, tal y como esperabas, puedes utilizar el bloque de código de estilo Markdown para resaltar tu código.

//```ts
console.log('Hello, World!')
//```

Damos soporte a Prism y Shiki como resaltadores de sintaxis. Revisa la sección de resaltadores para más detalles.

Resaltado de línea

Para resaltar líneas específicas, simplemente añade los números de línea dentro del paréntesis {}. Los números de línea empiezan a contar desde 1.

//```ts {2,3}
function sumar(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Para cambiar el resaltado en varios pasos, puede utilizar | para separarlos. Por ejemplo

//```ts {2-3|5|all}
function sumar(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Esto resaltará primero a: Ref<number> | number y b: Ref<number> | number, y después return computed(() => unref(a) + unref(b)) tras un clic, y finalmente, todo el bloque. Aprende más en la guía de animaciones de clics.

Para omitir el resaltado de cualquier línea, puedes establecer el número de línea en 0. Por ejemplo:










//```ts {0}
function suma(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Si el código no cabe en una diapositiva, puedes añadir la opción `maxHeight que establecerá una altura fija y permitirá el desplazamiento:


 









//```ts {2|3|7|12} {maxHeight:'100px'}
function suma(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
/// ...tantas líneas como desees
const c = suma(1, 2)
//```

Editor de Monaco

Cuando quieras hacer alguna modificación en la presentación, simplemente añade {monaco} después del identificador del lenguaje - ¡se convierte todo el bloque en un editor de Monaco con todas las funciones!

//```ts {monaco}
console.log('HolaMundo')
//```

Lea más sobre configurar Monaco.

Estilos incrustados

Puedes usar la etiqueta <style> en tu Markdown directamente para sobreescribir los estilos de la diapositiva actual.

# Esto es rojo

<style>
h1 {
  color: red
}
</style>

---

# La siguiente diapositiva no se ve afectada

La etiqueta <style> en Markdown tiene siempre alcance local. Como resultado destacado, un selector con el combinador hijo (.a > .b) es inutilizable como tal; consulta el enlace anterior. Para tener anulaciones de estilo globales, consulta la sección de personalización.

Gracias a Windi CSS, puedes usar CSS anidado y directivas (por @apply)

# Slidev

> Hello `world`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

Recursos estáticos

Al igual que harías en markdown, puedes utilizar imágenes que apunten a una url remota o local.

Para los recursos remotos, vite-plugin-remote-assets los almacenará en caché tras la primera ejecución para que puedan tener una carga instantánea incluso para las imágenes más pesadas.

![Imagen remota](https://sli.dev/favicon.png)

Para recursos locales, muévelos a la carpeta public y referéncialos con una barrita (/).

![Imagen local](/pic.png)

Si deseas aplicar tamaños o estilos personalizados, puedes convertirlos a la etiqueta <img>:

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

Notas

También puedes tomar notas para cada diapositiva. Se mostrarán en el Modo Presentador para que puedas consultarlas durante las presentaciones.

En Markdown, el último bloque de comentarios de cada diapositiva será tratado como una nota.

---
layout: cover
---

# Página 1

Esta es la página de la portada.

<!-- Esto es una nota -->

---

# Página 2

<!-- Esto NO es una nota porque precede al contenido de la diapositiva -->

La segunda página

<!--
Esta es otra nota
-->

Iconos

Slidev te permite tener acceso a casi todos los conjuntos de iconos populares de código abierto directamente en tu markdown. Potenciado por unplugin-icons e Iconify.

El nombrado sigue la convención de Iconify: {collection-name}-{icon-name}. Por ejemplo:

Puedes navegar y buscar todos los iconos con Icônes.

Estilizando iconos

Puedes estilizar los iconos tal y como estilizarías un elemento HTML. Por ejemplo:

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

Slots

Disponible desde v0.18

Algunas plantillas pueden proporcionar múltiples puntos de contribución utilizando los <slots> nombrados de Vue.

Por ejemplo, en una estructura de dos columnas, puede tener dos columnas a la izquierda (slot default) y a la derecha (slot right) una al lado de la otra.

---
layout: two-cols
---

<template v-slot:default>

# Izquierda

Esto muestra a la izquierda

</template>
<template v-slot:right>

# Derecha

Esto se muestra a la derecha

</template>

Izquierda

Esto se muestra a la izquierda

Derecha

Esto se muestra a la derecha

También proporcionamos una sintaxis abreviada (::nombre::) para el nombre del slot. El siguiente ejemplo funciona exactamente igual que el anterior.

---
layout: two-cols
---

# Izquierda

Esto muestra a la izquierda

::right::

# Derecha

Esto se muestra a la derecha

También puede especificar explícitamente el slot por defecto y proporcionar un orden personalizado

---
layout: two-cols
---

::right::

# Derecha

Esto se muestra a la derecha

::default::

# Izquierda

Esto muestra a la izquierda

Configuraciones

Todas las configuraciones necesarias se pueden definir en el archivo Markdown. Por ejemplo:

---
theme: seriph
layout: portada
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

# Slidev

Esta es la página de la portada

Lee más sobre la configuración de Front Matter.

LaTeX

Slidev viene con soporte integrado de LaTex, gracias a KaTeX.

En líneas

Rodea tu LaTeX con un solo $ a cada lado para la representación en línea.

$\sqrt{3x-1}+(1+x)^2$

Bloque

Utiliza dos ($$) para la representación de bloques. Este modo utiliza símbolos más grandes y centra el resultado.

$$
\begin{array}{c}

\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 \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$

Aprende más: Demo | KaTeX | markdown-it-katex

Diagramas

También puedes crear diagramas / gráficos a partir de descripciones textuales en tu Markdown, gracias a Mermaid.

Los bloques de código marcados como mermaid se convertirán en diagramas, por ejemplo:

//```mermaid
sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction
//```

Además, puedes pasarle un objeto de opciones para especificar la escala y el tema. La sintaxis del objeto es un literal de objeto de JavaScript, tendrás que añadir comillas (') para las cadenas y utilizar comas (,) entre las claves.

//```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
//```

Aprende más: Demo | Mermaid

Entradas múltiples

Disponible desde v0.15

Puedes dividir tu slides.md en varios archivos y organizarlos como quieras.

slides.md :

# Página 1

Esta es una página normal

---
src: ./subpagina2.md
---

<!-- esta página se cargará desde './subpagina2.md' -->
El contenido en línea será ignorado

subpagina2.md :

# Página 2

Esta página es de otro archivo

Fusión de Front Matter

Puedes proporcionar Front Matters tanto de tu entrada principal como de páginas externas de markdown. Si hay las mismas claves en ellas, las de la entrada principal tienen mayor prioridad. Por ejemplo:

slides.md :

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md :

---
layout: cover
background: https://sli.dev/foo.png
---

# Portada

Página de portada

Acabarán siendo equivalentes a la página siguiente:

---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---

# Portada

Página de portada

Reutilización de páginas

Con el soporte de entradas múltiples, la reutilización de páginas puede ser sencilla. Por ejemplo:

---
src: ./cover.md
---

---
src: ./intro.md
---

---
src: ./content.md
---

---
# reutilización
src: ./content.md
---