Trucos: Reveal.js

Recopilando trucos sobre Reveal.js slides.

Quarto
Autor
Afiliación

Pedro J. Pérez

Universitat de València

Fecha de Publicación

20 de febrero de 2024

Fecha de modificación

31 de mayo de 2024

1 Texto

1.0.1 texto: r-fit-text

Que un texto ocupe toda la slide, pero centrado verticalmente; para ello, has de combinar r-fit-text con the center class en el título de la slide.

## {.center}

::: r-fit-text
This fits perfectly!
:::


1.0.2 texto: posición absoluta

  • puedes rotarlo con : style="rotate: -10deg;"
[My textito]{.absolute left="50%" top="20%" style="rotate: -10deg;"}


1.0.3 texto: cuadritos en el texto

  • Lo vi aquí. Lo utilizan para resaltar texto que pones encima de una foto

  • Puedes rotarlo poniendo rotate: -10deg; dentro de style = " ...."

::: {.absolute left="15%" top="5%" style="font-size:1.8em; padding: 0.75em 0.7em; background-color: rgba(44, 0, 142, .4);"}
First we take Manhattan, 

then we take Berlin
:::



2 Animaciones

  • Para hacer que un texto aparezca de forma incremental, pero ademas el nuevo texto que parece se hace grande y cambia de color. Puedes ver un ejemplo en esta slide
<center>

Quarto® is an

::: {.fragment .grow .semi-fade-out}
open-source
:::

::: {.fragment .grow .semi-fade-out}
scientific and technical
:::

::: {.fragment .grow .semi-fade-out}
publishing system
:::

::: {.fragment .grow .semi-fade-out}
built on Pandoc.
:::

</center>



3 Fondos

3.0.1 Hacer como si cambias el fondo de una slide

  • Puedes simular que cambias el fondo de una slide, para ello sólo hay que poner la misma slides pero añadiendo en su título: # My slide que cambia {background-transition="fade" background-color="#B7D9F6"}



4 Layout

4.0.1 Columnas incrementales

  • Puedes hacer que, si divides el layout en varias columnas, que estas se muestren una a una, vamos, que primero se muestre solo la primera columna (hay que poner en la segunda columna ::: {.column .fragment width="50%"}1. Dentro de cada columna puedes hacer que los bullets sean incrementales o no. Por ejemplo:

::: columns
::: {.column width="50%"}
::: {.incremental}
- They sentenced me to 20 years of boredom


- For trying to change the system from within
:::
:::

::: {.column .fragment width="50%"}
- Ah, remember me, I used to live for music

- First we take Manhattan, then we take Berlin
:::
:::



5 Listas

5.0.1 Highlight incremental bullets

  • Queda chulo hacer que una lista de bullets se resalte más el bullet actual y que los otros bullets se difuminen un poco. Se explica aquí.

Has de poner esto en el .qmd:

::: {.incremental .highlight-last}
- thing 1
- thing 2
:::

Pero para que funcione, has de poner esto en el .css:

.highlight-last  {
  color: grey;
  .current-fragment {
    color: #5500ff;
  }
}

La explicación es que se pone todo en gris y .current-fragment muestra en un color distinto el current bullet



6 Imágenes

6.0.1 Imagén con {.r-stretch}

  • Hace que la imagen ocupe todo el espacio vertical restante. Documentación aquí
## Slide 1 {.nostretch}

![](imagenes/flor.jpg)

## Slide 2

![](imagenes/flor.jpg){.r-stretch}

## Slide 3

![](imagenes/flor.jpg){.nostretch fig-align="center" width="500px"}


6.0.2 Imagen cubriendo slide

  • Puedes hacer que una imagen cubra toda la slide.
# Datos: {background-image="./imagenes/flor.jpg" background-size="cover" background-opacity="0.5"}


  • Si lo que quieres es cubrir con una imagen la primera slide, la slide del título, entonces tendríaa que incorporar al yaml de las slides lo siguiente:
title-slide-attributes:
  data-background-image: ./imagenes/my_IA_img3.png
  data-background-size: cover
  data-background-opacity: "0.5"


6.0.3 opciones de chunks para imágenes

```{r}
#| fig-alt: "Chart showing ..."
#| fig-height: 7
#| fig-width: 10
#| fig-align: center
#| output-location: column #- {slide, column, column-fragment}

library(tidyverse)
g <- ggplot(
  data = iris,
  aes(x = Sepal.Length, y = Petal.Length)
) +
  geom_point()
g
```



7 Miscelanea

7.0.1 Extraer las speaker notes

  • Si quieres extraer las speaker notes de unas Revealjs slides, lo explican aquí. Abajo tienes el código:
Código para extraer notas de orador en Reveal.js 
# Read input from an external text file
input_text <- readLines("posit-conf-2023.qmd", warn = FALSE)

# Combine lines into a single string
input_text <- paste(input_text, collapse = "\n")

# Define the regular expression
regex_pattern <- ":::{\\.notes}\\n([^::]*)\\n:::"

# Extract notes using regex
notes <- gregexpr(regex_pattern, input_text, perl = TRUE)
notes <- regmatches(input_text, notes)

# Flatten the list of matches
notes <- unlist(notes)

# Clean up the notes
notes <- gsub(x = notes, pattern = ":::{\\.notes}\\n\\n", replacement = "", perl = TRUE)
notes <- gsub(x = notes, pattern = "\\n\\n:::", replacement = "", perl = TRUE)

# Print the extracted notes
for (note in notes) {
  cat("----------------------", "\n", note, "\n")
}



8 Themes



9 Extensiones

  • gongtimer: añade una barrita muy fina en el borde inferior de las slides que te avisa del tiempo que falta para acabar la presentación.

  • codewindow: añade unos “styled codeblock windows for code”. Salen muy chulos, es una alternativa a los cuadritos de los chunks tradicionales.

  • highlightword: permite marcar/subrayar un trozo específico de un chunk



10 Ejemplos de Slides



11 Biblio/ejemplos/trucos

  • Charla de Emil Hvitfeldt aquí en NY. Tiene una slide que va fluyendo, está justo aquí

  • Puedes usar preview-links: true para que los links no se abran en el navegador sino encima de las slides. Documentación aquí

  • Un buen post con algunos truquillos de Revealjs aquí. Prácticamente ya he incorporado los trucos abajo. Usa r-fit, strech las imágenes, poner un cuadro de texto encima de una imagen etc …

Notas

  1. Lo vi en este repo, concretamente en el fichero index.qmd↩︎

Reutilizar