13 Codewindow
The quarto-revealjs-codewindow extension adds styled codeblock windows to your Quarto reveal.js presentations, giving your code chunks a polished, IDE-like appearance.
13.1 What is Codewindow?
Codewindow wraps your code chunks in a styled window frame with a file tab, similar to how code appears in modern code editors. This visual treatment makes code stand out on slides and provides helpful context through language-specific icons.
13.2 Installation
To use this extension, run the following command in your terminal:
quarto add emilhvitfeldt/quarto-revealjs-codewindowOnce installed, add the extension to your YAML header:
---
title: "My Presentation"
format: revealjs
revealjs-plugins:
- codewindow
---13.3 Basic Usage
Wrap any code chunk in a ::: {.codewindow} fenced div to apply the window styling. Add plain text before the code chunk to create a file tab label:
::: {.codewindow}
script.R
```r
library(ggplot2)
ggplot(mtcars, aes(mpg, wt)) +
geom_point()
```
:::13.4 Language Icons
Add a language class to display an icon in the file tab. The following languages are supported:
.r- R.py- Python.js- JavaScript.quarto- Quarto.html- HTML.css- CSS.sass- Sass.julia- Julia
Example with an R icon:
::: {.codewindow .r}
analysis.R
```r
mtcars |>
dplyr::group_by(cyl) |>
dplyr::summarize(mean_mpg = mean(mpg))
```
:::13.5 Customizing Width
You can control the width of the codewindow using the width argument directly in the fenced div:
::: {.codewindow .r width="80%"}
script.R
```r
print("Hello, world!")
```
:::