codewindow Example

Basic usage

Everything starts with wrapping a codeblock with .codewindow fenced div. So

::: {.codewindow}
```{scss}
.pink {
  color: pink;
}
```
:::

becomes

.pink {
  color: pink;
}

file name on file tab

THe file name can be specified by writing the name as plain text inside the codewindow div. So

::: {.codewindow}
styles.scss
```{scss}
.pink {
  color: pink;
}
```
:::

becomes

styles.scss

.pink {
  color: pink;
}

File icon

Adding a css class to the .codewindow div will add icon if supported. so

::: {.codewindow .sass}
styles.scss
```{scss}
.pink {
  color: pink;
}
```
:::

becomes

styles.scss

.pink {
  color: pink;
}

File icons

script.R

report.Rmd

script.py

script.js

script.jl

index.qmd

index.html

styles.css

styles.sass

File icons

script.sh

main.nf

model.stan

model.inp

File icons

query.sql

README.md

_quarto.yml

data.json

.gitignore

deploy.bash

File icons

analysis.sas

survey.sps

regress.do

solve.m

kernel.cpp

solver.f90

File icons

app.ts

main.rs

server.go

Setting width

The width argument is natively supported, so the width can be set like so:

::: {.codewindow .sass width="350px"}
styles.scss
```{scss}
.pink {
  color: pink;
}
```
:::

becomes

styles.scss

.pink {
  color: pink;
}

Setting colors

The colors of a single window can be set with the bg, header-bg, tab-bg, tab-active-bg, color and shadow-color arguments:

::: {.codewindow .sass bg="#fdf6e3" header-bg="#eee8d5" shadow-color="#93a1a1"}
styles.scss
```{scss}
.pink {
  color: pink;
}
```
:::

becomes

styles.scss

.pink {
  color: pink;
}

Dark windows

The .codewindow-dark class is a preset for dark decks:

styles.scss

.pink {
  color: pink;
}

To restyle every window in the deck, set the same custom properties in your own stylesheet:

.reveal {
  --codewindow-bg: #1e293b;
  --codewindow-header-bg: #0f172a;
  --codewindow-tab-bg: #334155;
  --codewindow-color: #e2e8f0;
}

Window chrome

The chrome argument picks the window buttons: mac (the default), windows or none.

script.R

runif(1)

[1] 0.3077132

script.R

runif(1)

[1] 0.4713606

Multiple blocks in one window

A codewindow can hold more than one code block (and text between them); nothing gets dropped. So

::: {.codewindow .r}
my-script.R
```{r}
runif(1)
```

Then some more code:

```{r}
runif(42)
```
:::

Multiple blocks in one window

becomes

my-script.R

runif(1)

[1] 0.8324435

Then some more code:

runif(42)

 [1] 0.976132025 0.710818838 0.542753967 0.554178186 0.579513535 0.011229863
 [7] 0.421169775 0.477525339 0.202318234 0.032360265 0.008476124 0.236686213
[13] 0.768398353 0.696532841 0.392681850 0.932846806 0.285237339 0.946558364
[19] 0.210533648 0.434508035 0.741290355 0.242610825 0.860283587 0.068906115
[25] 0.237520742 0.222293650 0.967294256 0.297232778 0.528025975 0.340251497
[31] 0.161545125 0.837734780 0.796443426 0.611654332 0.724695000 0.929298192
[37] 0.600192462 0.114420020 0.847621405 0.140601044 0.967164707 0.936878985

Multiple tabs

Wrap several .editor divs in a .codewindow to get one file tab per editor. Add .active to pick which starts open (the first otherwise), and .fragment to focus the next tab as the slide advances.

:::: {.codewindow}
::: {.editor .r name="Final (updated) - USE THIS ONE - .R"}
```r
data <- read.csv("my-data.csv")
```
:::

::: {.editor .r .fragment name="01-clean.R"}
```r
library(dplyr)
data <- filter(data, x > 0)
```
:::
::::

Only the best names

data <- read.csv("my-data.csv")

library(dplyr)
data <- filter(data, x > 0)

Multiple tabs

becomes (advance the slide to switch tabs)

data <- read.csv("my-data.csv")

library(dplyr)
data <- filter(data, x > 0)

library(ggplot2)
ggplot(data, aes(x, y)) +
  geom_point()

Additional notes

These divs should work like any other divs. So you can pass in other styles with styles="" and use absolute position

See next slide for examples

Additional notes

styles.scss

.pink {
  color: pink;
}

styles.scss

.yellow {
  color: yellow;
}

styles.scss

.blue {
  color: blue;
}