Code Window

Code blocks dressed as application windows.

What the code-window extension does, how to enable it, and the chrome it puts on a block.
Author

Mickaël CANOUIL, Ph.D.

A page of code blocks is a page of grey rectangles. Which file is which, which one is a shell command and which a configuration file, has to be worked out from the contents.

code-window frames each block as a window: a title bar with the filename, traffic lights or title-bar buttons, and, where it helps, a fold.

Every named code block on this site is drawn by it, including this one:

_quarto.yml
filters:
  - code-window

Installation

quarto add mcanouil/quarto-code-window@1.5.0

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

filters:
  - code-window

Name the file, and the block is framed with it:

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

See the Reference for every option, and the Examples for each style and the folding.

Where it works

HTML formats, and Typst.

In HTML the chrome is assembled at page load by a script the extension injects, so the frame needs JavaScript. Under Typst the chrome is drawn by a wrapper function, and the extension carries hot-fixes for a few Quarto behaviours that Typst output still needs; the Reference lists them and when they switch themselves off.

Back to top