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

script.py

script.js

script.jl

script.sh

index.qmd

index.html

styles.css

styles.sass

main.nf

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;
}

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;
}