Examples

Every style, and the folding.

Code blocks framed by the extension, one per style and option, with the source alongside.

Every named block on this site is framed by the extension, so this page is its own demonstration. The site sets:

_quarto.yml

extensions:
  code-window:
    style: macos
    auto-filename: false

Naming the window

Quarto’s filename attribute names it:

```{.yaml filename="_quarto.yml"}
project:
  type: website
```

_quarto.yml

project:
  type: website

A block with no filename is left alone here, because this site turns auto-filename off. With it on, that same block is framed and labelled with its language, in HTML and under Typst alike.

The three styles

```{.r filename="analysis.R" code-window-style="macos"}
```

analysis.R

summary(cars)

analysis.R

summary(cars)

analysis.R

summary(cars)

Traffic lights, title-bar buttons, and a plain filename.

Folding

```{.python filename="long.py" code-window-collapse="closed"}
```

long.py

for i in range(100):
    print(i)

short.py

print("expanded by default")

closed and open differ only in the initial state. The <details> element is built at page load by the script the extension injects, so the fold needs JavaScript; without it the block renders open and unframed.

Set collapse under extensions.code-window to fold every block, and code-window-collapse="false" to opt one out.

Highlighted lines

A block that highlights lines gets a chip beside its filename:

```{.r filename="steps.R" code-line-numbers="2-3"}
```

steps.R

x <- seq_len(10)
y <- x^2
z <- sum(y)
z

code-window-lines sets the chip independently of the highlighting, and lines-label: false turns the chip off.

Leaving a block alone

```{.bash code-window-enabled="false"}
```

echo "no chrome on this one"

Annotations still render on a block with the chrome turned off.

Source

The repository ships a short, standalone starting point you can copy: example.qmd.