Examples
Every style, and the folding.
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: falseNaming the window
Quarto’s filename attribute names it:
```{.yaml filename="_quarto.yml"}
project:
type: website
```_quarto.yml
project:
type: websiteA 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.
Deriving the name
With auto-filename on, a block that names no file is labelled after its language:
```python
print("hello")
```The title bar then reads PYTHON. A derived name is drawn smaller and in capitals, so a reader can tell it from a file that exists on disk. A block with no language at all is labelled DEFAULT, and a block whose language Pandoc cannot highlight keeps its own token as the label.
This section shows source only. The site sets auto-filename: false, so it frames no block that leaves filename out. A single block opts out where the option is on:
```{.python code-window-no-auto-filename="true"}
print("hello")
```The attribute only suppresses a derived name. It cannot ask for one, so code-window-no-auto-filename="false" reads exactly like leaving the attribute out.
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"}
```code-window-lines writes the chip on its own and leaves Quarto’s highlighting alone:
```{.r filename="notes.R" code-window-lines="1,4"}
```notes.R
x <- seq_len(10)
y <- x^2
z <- sum(y)
zThe chip above reads L1,4, and no line is highlighted. Under Typst the same block prints 1,4 in the chip, without the leading L.
lines-label: false under extensions.code-window removes the chip from every block.
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.
Turning the filter off
enabled stops the filter for a whole document or project:
_quarto.yml
extensions:
code-window:
enabled: falseThe filter still checks each block’s attributes against its schema. It then adds no chrome to any block, and loads neither the stylesheet nor the script. So code-window-enabled="true" on a block cannot switch the chrome back on. code-window-enabled can only turn a block off, never on.
With the filter off, every code block keeps the classes Quarto gives it. A block whose language Pandoc cannot highlight keeps that language, and a block with no language gains none. The attributes the filter reads stay on the block too, and reach the HTML as data-code-window-*, which is what a document without the extension also produces.
A block that names a file still gets the plain title bar Quarto builds for it. That bar carries no traffic lights, no fold, and no line chip.
See Options for the option and Per-block attributes for the attribute.
The output of an executed cell
An engine writes the output of a cell as a code block with no language, inside a cell-output div. The filter leaves that block as Quarto wrote it:
::: {.cell-output .cell-output-stdout}
```
[1] 1 4 9 16
```
:::cell-output: true frames it instead. The frame comes from the derived name, so auto-filename has to be on as well. The title bar then reads DEFAULT, because the output block carries no language of its own. This site turns auto-filename off, so cell-output: true adds no frame here.
With cell-output off, which is the default, the extension marks every block inside a cell-output div and then leaves it alone, so the output keeps the shape Quarto gives it. Only cell-output: true lets the rest of the extension touch those blocks.
An engine can name the output instead, through knitr’s attr-output for example. Output named that way is framed whatever cell-output says:
console
[1] 1 4 9 16This page runs no engine, so the div above is written by hand in the shape an engine produces. See Executed cells for the option itself.
Renaming the Typst function
Under Typst the chrome is a call to a function the extension writes into the document. wrapper renames that function and the helper functions beside it:
_quarto.yml
extensions:
code-window:
wrapper: "my-window"Each block then emits #my-window(...) in place of #code-window(...), and the annotation helpers become my-window-annotation-item and my-window-circled-number. Rename it when the document already defines a function called code-window. The option does nothing in HTML, which draws its chrome from the stylesheet and the script instead.
The Typst hot-fixes
The three hot-fixes act on Typst output only. Each one is on by default. A boolean turns one off:
_quarto.yml
extensions:
code-window:
hotfix:
code-annotations: true
skylighting: false
typst-title: trueA map adds a version at which the hot-fix switches itself off:
_quarto.yml
extensions:
code-window:
hotfix:
skylighting:
enabled: true
quarto-version: "1.9.0"The extension compares that string with the running Quarto. At or above the named version the hot-fix stays out, whatever enabled says. An upgrade thus retires the hot-fix with no further edit.
code-annotations and skylighting are linked.
code-annotations and skylighting work together: the first resolves the annotations, and the second supplies the rule that draws the circled marker beside an annotated line. Turn skylighting off, and the numbered list stays under the block while every marker inside it goes, along with the block styling and the inline code backgrounds the same module supplies.
Every hot-fix follows enabled: with the filter off, none of them acts, and the Typst document comes out as Quarto writes it.
See Hot-fixes for what each one corrects.
Source
The repository ships a short, standalone starting point you can copy: example.qmd.