Search code examples
rr-markdownpausetikzquarto

Using tikz in quarto presentation

I'm trying for my slides and wondering how to use \pause in code. Minimum working example is below for reference.

---
title: "Test Slides"
format:
  revealjs: 
    chalkboard: 
      buttons: false
    preview-links: auto
    css: styles.css
---

## Intro
Here is a TikZ picture

```{r, engine = 'tikz'}
\begin{tikzpicture}
 \draw (0,0) circle (1cm);
 %\pause
 \draw (0,0) circle (2cm);
\end{tikzpicture}
```
Solution

  • I'm pretty sure that \pause won't work here. knitr produces an image from tikz code and then includes the graphics. You can check this by looking at the resulting html code:

    <h2>Intro</h2>
<p>Here is a TikZ picture</p>
<div class="cell">
<div class="cell-output-display">
<p><img data-src="notes_files/figure-revealjs/unnamed-chunk-1-1.png" width="960"></p>
</div>

    The LaTeX command \pause shows a frame step by step. Or rather, it creates multiple slides each revealing a bit more of your image/drawing. The only option I see to mimic the \pause behaviour in quarto or R Markdown is to create two slides, one with each image. You might be tempted to increment the slide in your revealjs presentation, but this will not work either, as images are put one underneath the other, not on top. The best way, in my opinion, is this:

    ---
title: "Test Slides"
format:
  revealjs: 
    chalkboard: 
      buttons: false
    preview-links: auto
    css: styles.css
---

## Intro
Here is a TikZ picture

```{r, engine = 'tikz'}
\begin{tikzpicture}
 \draw (0,0) circle (1cm);
 % \draw (0,0) circle (2cm);
\end{tikzpicture}
```


<section data-visibility="uncounted"></section>
## Intro
Here is a TikZ picture

```{r, engine = 'tikz'}
\begin{tikzpicture}
 \draw (0,0) circle (1cm);
 \draw (0,0) circle (2cm);
\end{tikzpicture}
```

    The revealjs code <section data-visibility="uncounted"></section> makes sure everything will look as if you increment the slide. I don't see an option for that in quarto yet, but inserting the html code directly works. Update: you can now write ## Intro {visibility="uncounted"} which has the same effect.