Extensiones

1 Intro

Una de las novedades de Quarto es la posibilidad de usar extensiones. Las extensiones se escriben en lenguaje Lua. Aquí la documentación oficial.

Si quieres aprender a hacer extensiones, aquí tienes un buen un post.

Vamos a aprender a usar las extensiones con un ejemplo: vamos a instalar la extensión “quarto-youtube-embed” que sirve para incluir vídeos de youtube en un documento .qmd.

2 Un ejemplo (quarto-youtube-embed)

Con Rmd alguna vez he puesto vídeos en mis slides o tutoriales. Usaba el paquete de R vembed. Ahora, con Quarto, también podríamos hacerlo de esa forma, solo tendríamos que insertar en nuestro documento un chunk como:

```{r}
#| eval: false
library("vembedr")
embed_url("https://www.youtube.com/watch?v=ACv9zaBa1A4")
```

Pero, ahora, con Quarto, podemos también hacerlo usando la extensión “quarto-youtube-embed”. Aquí está el repo de la extensión. Veamos cómo:

Tarea: Instalar y usar una extensión

Concretamente instalaremos la extensión “quarto-youtube-embed”. El repo aquí. Aunque realmente el repo ha sido archivado. Veremos si se puede seguir instalando.

• Lo primero es instalar la extensión de Quarto. Como pone en el repo, lo haremos desde la Terminal así:

quarto install extension sellorm/quarto-youtube-embed

• Una vez instalada, podemos incrustar un vídeo usando el siguiente “shortcode” en nuestro documento .qmd:

{{< youtube zk9zHqXm6m0 >}}

Con lo que habremos incrustado el vídeo en nuestro documento .html final.

El shortcode << video >>

La extensión “quarto-youtube-embed” funcionaba perfectamente pero se ha quedado obsoleta porque Quarto ya incorpora de serie una extensión para incrustar vídeos. Solo hay que usar el siguiente shortcode:

{{< video https://youtu.be/7SVYNyvi0wQ >}}

Aquí la documentación oficial del shortcode {{ < video >}}. Como ves, se ha mejorado la extensión original ya que ahora permite, no sólo insertar vídeos de youtube, sino también de otros servicios como Vimeo, y puedes fijar el minuto en el que empieza el vídeo y algunas cosas más.

3 Otro ejemplo (Lightbox)

Vamos a instalar y usar una nueva extensión, concretamente la extensión “Lightbox”.

Lo que hace esta extensión es que podamos pinchar en una imagen y verla ampliada y con una descripción. Aquí puedes ver ejemplos de lo que se puede hacer con “Lightbox”.

En el repo se explica con más detalle lo que se puede hacer con “Lightbox”.

Tarea: Instalar y usar la extensión “Lightbox”

Vamos a instalar y usar una nueva extensión, concretamente la extensión “Lightbox”. Su repo aquí

• Lo primero es instalar la extensión desde la Terminal:

quarto install extension quarto-ext/lightbox

Esta vez, para poder usar la extensión en un documento .qmd hemos de incluir en el yaml del documento lo siguiente:

---
title: Simple Lightbox Example
filters:
   - lightbox
---

![Mi imagen con Lighbox activado](./imagenes/economia.gif){.lightbox description="El logo-nano de la facultad de Economía de la Universtat de València"
desc-position="left"}

Con lo que veríamos algo como:

Mi imagen con Lighbox activado

Resulta que tengo buen ojo, esta extensión también ha sido incorporada en Quarto 1.4. Aquí tienes la documentación oficial.

Para habilitar Lightbox en nuestro documento .qmd solo tenemos que añadir lightbox: true en el YAML del documento:

---
title: Ejemplo de Lightbox
lightbox: true
---

![Una foto chula](my-ruta/imagen-chula_01.jpg)

![Otra imagen chula pero sin Lightbox Lovely Image](my-ruta/imagen-chula_02.jpg){.no-lightbox}


Tambien se pueden agrupar imagenes en una "gallery"

![A Lovely Image](mv-1.jpg){group="my-gallery"}

![Another Lovely Image](mv-2.jpg){group="my-gallery"}

Lightbox también funciona con imágenes (o gráficos) generadas con código R. Aquí tienes la documentación.

Lightbox ofrece más posibilidades para tunear el efecto Lightbox.

4 Otro ejemplo (tweets)

Voy a instalar una nueva extensión, concretamente la extensión Quarto social embeds. Concretamente con esta extensión podremos insertar en nuestros documentos: gists de GitHub, videos de Loom, youtube y Vimeo y tweets. Realmente la instalo porque quiero tenerla disponible para insertar tweets.

En el repo se explica con más detalle lo que se puede hacer con Quarto social embeds.

Instalar y usar la extensión Quarto social embeds

Vamos a instalar y usar una nueva extensión, concretamente la extensión “Quarto social embeds”. Su repo está aquí.

• Lo primero es instalar la extensión desde la Terminal:

quarto install extension sellorm/quarto-social-embeds

Para insertar un tweet has de:

{{< tweet user=<username> id=<id> >}}

por ejemplo:

{{< tweet user=ambitocultural id=1589543369512026112 >}}

Para insertar un gist de Github has de:

{{< gist sellorm 20525aff669acafb975b7495b8f2066e >}}

5 Listado de extensiones

Aquí tienes un listado de extensiones disponibles. Las extensiones oficiales de Quarto están aquí.

6 Algunas extensiones chulas

Son simplemente algunas (de las muchas) que me han llamado la atención :smile:

• Contar palabras: https://fediscience.org/@andrew/110146498837984507

• quarto-wordcount: cuenta las palabras de un documento .qmd.

• quarto-revealjs-codewindow: genera chunk de código muy chulos, y funciona lo de pegar, rotar, etc.

• slickR: en realidad es un R pkg, pero sirve para hacer carruseles de imágenes o … plots, tables, gifs, videos and objects embedded en iframes.

• fluctuator: también un R pkg que permite manipular SVG’s con R. Apareció en este toot donde preguntaban por incremental Mermaid diagrams in Quarto.

• annotate-equations: sirve para colorear y anotar ecuaciones de Latex. En realidad es un paquete de Latex, pero él parece que lo ha adaptado a QMD. No lo he probado, pero me parece interesante.

• quarto-spotlight: extensión para hacer highlight en la posición del ratón. Tiene opciones de tamaño, color, etc. Por defecto sale chulo, muy grande y con un color que me gusta, es como si fuese un foco apuntando a una parte de las slides.

• r2resize: es un R pkg que permite hacer “cards” redimensionables, de tamaño, de tamaño del texto, etc. Esta chulo, también hay la posibilidad de tener una card que muestre una pregunta y puedas luego mover para ver la respuesta. Está chulo

• quarto-roughnotation: sirve para en unas revelajs subrayar o marcar o tachar o … trozos de texto. Es como si fuese un rotulador que solo aparece cuando aprietas la tecla R. Chulo pero no lo he probado y no sé la precisión.

• add-code-files: permite incluir el contenido de scripts (o code files) en cajas d chunks en tus .qmd's, además, funciona lo del Code Folding y puedes poner que lineas se muestran en el documento final.

• hide-comment: para poner comentarios ocultos en tus chunks. Has de usar la marca #> para crearlos.

• quartostamp: no es una extensión, es un paquete que contiene RStudio addings para insertar divs, callouts etc… Para mi ptse, PERO en este post les encanta.

Mi imagen con Lighbox activado