Search code examples
rr-markdownquartoreveal.jsimpress.js

General revealjs / impressjs question in quarto

I wanted to get some advice on implementing the following but in R's quarto using css/scss. My background is not in js, css or scss but I have managed to download and install the impress.js files and get it working locally. It doesn't seem difficult to modify / edit for a standalone presentation but I was hoping to try and find a way to introduce data, interactively etc. into such a presentation.

Here is a link to the ìmpressjs demo:

https://impress.js.org/#/bored

Heres the github

https://github.com/impress/impress.js

Would it be possible to copy over the css/js files and use it in a quarto environment?

Solution

  • Here is a minimal example of a Quarto file that works with impress.js. Make sure that your .qmd file is in a folder with the "js" and "css" impress.js source files.

    This example makes use of the pandoc extension fenced_divs, which is used by default in Quarto. It allows to define HTML <div>s by inserting fenced ::: blocks.

    ---
format: html
editor: visual
---

```{=html}
<link rel="stylesheet" href="./css/impress-common.css">
<link rel="stylesheet" href="./css/impress-demo.css">
```

::: {#impress}

::: {#myFirstSlide .step .slide}

# My first slide

```{r}
plot(mtcars)
```


:::

::: {#my2ndSlide .step data-x="1000" data-y="1000" data-z="-1000" data-scale="2" data-rotate-z="90"}

# Powerful, but simple blah

:::

:::

```{=html}
<script src="js/impress.js"></script>
<script>impress().init()</script>
```

    enter image description here

    EDIT: I created an impress.js Quarto format extension: Github.