Quarto Typst Render

https://m.canouil.dev/quarto-typst-render
Admin
A Quarto filter extension that compiles Typst code blocks to images (PNG, SVG, or PDF) for use...
Tokens:7,353
Snippets:96
Trust Score:5.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Typst Render Extension

Source: https://m.canouil.dev/quarto-typst-render

Install the extension using the Quarto CLI. This command adds the extension to your project's `_extensions` directory.

```bash
quarto add mcanouil/quarto-typst-render@0.17.0
```

--------------------------------

### Generate Social Card with Typst

Source: https://m.canouil.dev/quarto-typst-render

Renders a high-resolution social card as a PNG image using Typst. This example demonstrates advanced layout, gradients, and text styling for a repository card.

```typst
//| label: fig-social-card
//| cap: "Social card for quarto-typst-render."
//| format: png
//| dpi: 288
//| width: 1280pt
//| height: 640pt
//| margin: 0pt
//| output-location: slide

#let gradient-bg = gradient.linear(
  rgb("#1a1a2e"),
  rgb("#16213e"),
  rgb("#0f3460"),
  angle: 135deg,
)

#let accent = rgb("#e94560")
#let text-primary = rgb("#eaeaea")
#let text-secondary = rgb("#a0a0b0")
#let surface = rgb("#1a1a2e").lighten(10%)

#set page(fill: gradient-bg)
#set text(font: "Inter", fill: text-primary)

#place(
  top + left,
  dx: -40pt,
  dy: -40pt,
  circle(radius: 200pt, fill: accent.transparentize(92%)),
)
#place(
  bottom + right,
  dx: 80pt,
  dy: 80pt,
  circle(radius: 300pt, fill: rgb("#0f3460").transparentize(60%)),
)

#align(horizon)[
  #pad(x: 72pt)[
    #grid(
      columns: (1fr, auto),
      column-gutter: 48pt,
      align: (left + horizon, right + horizon),
      [
        #block(
          fill: accent,
          radius: 6pt,
          inset: (x: 14pt, y: 8pt),
        )[
          #text(
            size: 14pt,
            weight: "bold",
            tracking: 1.5pt,
            fill: white,
          )[QUARTO EXTENSION]
        ]

        #v(20pt)

        #text(size: 48pt, weight: "bold", tracking: -0.5pt)[
typst-render
        ]

        #v(12pt)

        #text(size: 20pt, fill: text-secondary, weight: "regular")[
          Compile Typst code blocks to images#linebreak()
          for any Quarto output format.
        ]

        #v(28pt)

        #text(size: 16pt, fill: text-secondary)[
          #text(fill: accent, weight: "bold")[mcanouil]
          #h(4pt)
          #text(fill: text-secondary.transparentize(50%))[/]
          #h(4pt)
          quarto-typst-render
        ]
      ],
    )
  ]
]

```

--------------------------------

### Reveal.js Fragment Output Location

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Controls where rendered output appears in Reveal.js presentations. This example shows output appearing as a fragment after the source.

```typst
#set text(size: 14pt)
#align(center)[Output appears as a *fragment* after the source.]
```

--------------------------------

### Configure Typst Preamble from File

Source: https://m.canouil.dev/quarto-typst-render

Sets a Typst preamble globally by referencing a file path. Any value ending in `.typ` is treated as a file path for the preamble.

```yaml
extensions:
  typst-render:
    preamble: "preamble.typ"
```

--------------------------------

### Enable Typst Render with Timing Control

Source: https://m.canouil.dev/quarto-typst-render

For cross-referencing support, use timing control to specify the filter path and execution timing.

```yaml
filters:
  - path: typst-render
    at: pre-quarto
```

--------------------------------

### Typst Rendering with Image Format and DPI

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Sets the output image format (e.g., png) and resolution (DPI) for Typst rendering.

```typst
//| format: png
//| dpi: 288
#set text(size: 14pt)
#align(center)[High-resolution PNG output.]
```

--------------------------------

### Typst Rendering with Echo: True

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Displays the source code alongside the rendered output when `echo: true` is set.

```typst
#set text(size: 14pt)
$ sum_(k=0)^n k = (n(n+1))/2 $
```

--------------------------------

### Multi-Page Typst Output: First Page Only

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Selects only the first page for rendering using `pages: 1`. Other pages are hidden.

```typst
//| pages: 1
//| width: 8cm
//| height: 6cm
#set text(size: 14pt)
#align(center + horizon)[
  *Page 1*: This page is shown.
]
#pagebreak()
#align(center + horizon)[
  *Page 2*: This page is hidden.
]
```

--------------------------------

### Basic Typst Rendering

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Renders a simple Typst code block as an image. This is the most basic usage of the extension.

```typst
#set text(size: 16pt)
Hello from *Typst*!
This is rendered as an image in all output formats.
```

--------------------------------

### Configure Typst Preamble Inline

Source: https://m.canouil.dev/quarto-typst-render

Sets a Typst preamble globally using an inline string. This is useful for applying global styles or importing packages before each Typst block.

```yaml
extensions:
  typst-render:
    preamble: '#set text(font: "Libertinus Serif")'
```

--------------------------------

### Enable Typst Render Filter

Source: https://m.canouil.dev/quarto-typst-render

Add the 'typst-render' filter to your document's front matter to enable the extension.

```yaml
filters:
  - typst-render
```

--------------------------------

### Arrange Typst Pages in Columns

Source: https://m.canouil.dev/quarto-typst-render

Use `layout-ncol` to arrange multiple Typst pages side by side in columns. Specify dimensions with `width` and `height`.

```typst
#set text(size: 14pt)
#align(center + horizon)[
  *Page 1*: First page content.
]
#pagebreak()
#align(center + horizon)[
  *Page 2*: Second page content.
]
```

--------------------------------

### Typst Rendering with Code Annotations

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Applies Quarto code annotations to Typst source lines marked with `// <N>`. Annotations are stripped and ignored for `echo` values other than `true`.

```typst
1#set text(size: 14pt)
2$ sum_(k=1)^n k = (n(n+1))/2 $
```

--------------------------------

### Typst Rendering with Echo: Fenced

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Displays source code wrapped in fenced code block markers, including options, mirroring Quarto's `echo: fenced` behavior.

```typst
#set text(size: 14pt)
$ integral_0^infinity e^(-x) d x = 1 $
```

--------------------------------

### Configure Typst Render Globally

Source: https://m.canouil.dev/quarto-typst-render

Sets Typst rendering options globally in the document's YAML configuration. These options can be overridden per block using comment+pipe syntax.

```yaml
extensions:
  typst-render:
    dpi: 288
    margin: "1em"
    format: png
    cache: true
```

--------------------------------

### Render External Typst File

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Renders an external `.typ` file using the `file` option. The content of the specified file will be used for rendering.

```typst
//| file: _example.typ
#set text(size: 14pt)
#align(center)[
  This content was loaded from an external `.typ` file.
]
```

--------------------------------

### Social Card Generation

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

This snippet demonstrates creating a high-resolution social card as a PNG image using Typst. It includes custom gradients, text styling, and layout for a repository social card.

```typst
```{typst}
//| label: fig-social-card
//| cap: "Social card for quarto-typst-render."
//| format: png
//| dpi: 288
//| width: 1280pt
//| height: 640pt
//| margin: 0pt
//| output-location: slide

#let gradient-bg = gradient.linear(
  rgb("#1a1a2e"),
  rgb("#16213e"),
  rgb("#0f3460"),
  angle: 135deg,
)

#let accent = rgb("#e94560")
#let text-primary = rgb("#eaeaea")
#let text-secondary = rgb("#a0a0b0")
#let surface = rgb("#1a1a2e").lighten(10%)

#set page(fill: gradient-bg)
#set text(font: "Inter", fill: text-primary)

#place(
  top + left,
  dx: -40pt,
  dy: -40pt,
  circle(radius: 200pt, fill: accent.transparentize(92%)),
)
#place(
  bottom + right,
  dx: 80pt,
  dy: 80pt,
  circle(radius: 300pt, fill: rgb("#0f3460").transparentize(60%)),
)

#align(horizon)[
  #pad(x: 72pt)[
    #grid(
      columns: (1fr, auto),
      column-gutter: 48pt,
      align: (left + horizon, right + horizon),
      [
        #block(
          fill: accent,
          radius: 6pt,
          inset: (x: 14pt, y: 8pt),
        )[
          #text(
            size: 14pt,
            weight: "bold",
            tracking: 1.5pt,
            fill: white,
          )[QUARTO EXTENSION]
        ]

        #v(20pt)

        #text(size: 48pt, weight: "bold", tracking: -0.5pt)[ 
          typst-render
        ]

        #v(12pt)

        #text(size: 20pt, fill: text-secondary, weight: "regular")[
          Compile Typst code blocks to images#linebreak()
          for any Quarto output format.
        ]

        #v(28pt)

        #text(size: 16pt, fill: text-secondary)[
          #text(fill: accent, weight: "bold")[mcanouil]
          #h(4pt)
          #text(fill: text-secondary.transparentize(50%))[/]
          #h(4pt)
          quarto-typst-render
        ]
      ],
    )
  ]
]
```
```

--------------------------------

### Multi-Page Typst Output Side by Side

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Includes all Typst pages side by side using `layout-ncol: 2`. Adjust `width` and `height` as needed.

```typst
//| layout-ncol: 2
//| width: 8cm
//| height: 6cm
#set text(size: 14pt)
#align(center + horizon)[
  *Page 1*: First page content.
]
#pagebreak()
#align(center + horizon)[
  *Page 2*: Second page content.
]
```

--------------------------------

### Native Passthrough for Typst Output

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Setting `output: asis` passes Typst code natively when the output format is Typst. For other formats, it behaves like `output: true` (compiles to an image).

```typst
#set text(size: 14pt)
This block uses native passthrough in Typst output.
```

--------------------------------

### Pass Input Variables to Typst

Source: https://m.canouil.dev/quarto-typst-render

Use `sys.inputs` to pass key-value pairs to Typst code. Global inputs are set in YAML, and per-block inputs override them.

```typst
#set text(size: 16pt)
#sys.inputs.at("greeting"), #sys.inputs.at("subject")!
```

--------------------------------

### Typst Rendering with Foreground and Background Colors

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Sets custom foreground (text) and background colors for rendered Typst images. Supports Typst color literals, CSS hex strings, or 'auto'.

```typst
//| foreground: eastern
//| background: luma(245)
//| width: 8cm
//| margin: 1em
#set text(size: 14pt)
#align(center)[
  Styled text with custom colours.
]
```

--------------------------------

### Typst Rendering with Page Dimensions

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Customizes the page dimensions (width, height, margin) for Typst image compilation. Use `output: asis` to ignore width and height, applying margin as inset.

```typst
//| width: 12cm
//| height: auto
//| margin: 1em
#set text(size: 14pt, fill: eastern)
#align(center)[
  #box(
    fill: luma(240),
    inset: 1em,
    radius: 4pt,
  )[A styled box with custom dimensions.]
]
```

--------------------------------

### Save Typst with Auto-Generated Filename from Label

Source: https://m.canouil.dev/quarto-typst-render

Renders a Typst block and automatically generates the filename based on the provided label. Includes a caption for the figure.

```typst
//| label: fig-auto-saved
//| cap: "A block saved with an auto-generated filename."
//| output-directory: _output
//| format: png
#set text(size: 14pt)
#align(center)[
  #circle(radius: 0.8cm, fill: eastern.lighten(60%))
]
```

--------------------------------

### Typst Rendering with Cross-Referencing

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Adds cross-reference labels and captions to Typst-rendered images using `//| label:` and `//| cap:`. Supports generic and prefix-specific options.

```typst
//| label: fig-typst-shapes
//| cap: "A simple Typst diagram with shapes."
//| alt: "A blue circle and orange rectangle arranged horizontally."
#set text(size: 12pt)
#align(center)[
  #stack(dir: ltr, spacing: 1em)[
    #circle(radius: 1cm, fill: blue.lighten(60%))
  ][
    #rect(width: 2cm, height: 2cm, fill: orange.lighten(60%))
  ]
]
```

--------------------------------

### Define Data for Typst from R (knitr)

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Uses `typst_define()` to push named values from a knitr session into Typst cells. Defined values are exposed as `#typst_define.<name>`.

```r
#| include: false
source("_extensions/mcanouil/typst-render/_resources/typst_define.R")
```

```r
#| output: asis
typst_define(mtcars = head(mtcars)[, c("mpg", "cyl", "hp")], n = 42L)
```

```typst
n = #typst_define.n

#let df = typst_define.mtcars
#let cols = df.keys()
#table(
  columns: cols.len(),
  table.header(..cols.map(c => [*#c*])),
  ..for i in range(df.at(cols.at(0)).len()) {
    cols.map(c => [#df.at(c).at(i)])
  }
)
```

--------------------------------

### Save Typst Output with Explicit Filename

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Saves compiled Typst output to a specified location and filename using `output-directory` and `output-filename`. The `format` option specifies the output image format.

```typst
//| output-directory: _output
//| output-filename: hello-typst.png
//| format: png
#set text(size: 14pt)
#align(center)[Hello from *Typst*, saved to `_output/hello-typst.png`.]
```

--------------------------------

### Render Defined R Data in Typst

Source: https://m.canouil.dev/quarto-typst-render

R data defined with `typst_define()` can be accessed and rendered in Typst using `#typst_define.<name>`.

```typst
n = #typst_define.n

#let df = typst_define.mtcars
#let cols = df.keys()
#table(
  columns: cols.len(),
  table.header(..cols.map(c => [*#c*])),
  ..for i in range(df.at(cols.at(0)).len()) {
    cols.map(c => [#df.at(c).at(i)])
  }
)
```

--------------------------------

### Basic Typst Code Block

Source: https://m.canouil.dev/quarto-typst-render

Write Typst code blocks in your document to be rendered by the extension.

```typst
#set text(size: 16pt)
Hello from *Typst*!
```

--------------------------------

### Define R Data for Typst

Source: https://m.canouil.dev/quarto-typst-render

Use `typst_define()` in R to push named values from R into Typst cells. Defined values are exposed as `#typst_define.<name>`.

```r
#| include: false
source("_extensions/mcanouil/typst-render/_resources/typst_define.R")
```

```r
#| output: asis
typst_define(mtcars = head(mtcars)[, c("mpg", "cyl", "hp")], n = 42L)
```

--------------------------------

### Reveal.js Column Output Location

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Renders Typst output in a side-by-side column within a Reveal.js presentation.

```typst
#set text(size: 14pt)
#align(center)[Output appears in a *side-by-side column*.]
```

--------------------------------

### Define Data for Typst from Python (jupyter)

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Uses `typst_define()` to push named values from a jupyter session into Typst cells. Defined values are exposed as `#typst_define.<name>`.

```python
#| include: false
import sys
sys.path.insert(0, "_extensions/mcanouil/typst-render/_resources")
from typst_define import typst_define
```

```python
#| output: asis
import pandas as pd
typst_define(df = pd.DataFrame({"x": [1, 2, 3], "y": [4, 5, 6]}), label = "hello")
```

```typst
#typst_define.label

#let df = typst_define.df
#let cols = df.keys()
#table(
  columns: cols.len(),
  table.header(..cols.map(c => [*#c*])),
  ..for i in range(df.at(cols.at(0)).len()) {
    cols.map(c => [#df.at(c).at(i)])
  }
)
```

--------------------------------

### Reveal.js Column Fragment Output Location

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Displays Typst output in a column, revealed as a fragment in Reveal.js presentations.

```typst
#set text(size: 14pt)
#align(center)[Output appears in a *column*, revealed as a fragment.]
```

--------------------------------

### Reveal.js Slide Output Location

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Configures Typst output to appear on the next slide in Reveal.js presentations.

```typst
#set text(size: 14pt)
#align(center)[Output appears on the *next slide*.]
```

--------------------------------

### Passing Input Variables to Typst

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Passes key-value pairs to Typst code via `sys.inputs`. Per-block inputs override global inputs using comma-separated syntax.

```typst
//| input: greeting=Hello,subject=World
#set text(size: 16pt)
#sys.inputs.at("greeting"), #sys.inputs.at("subject")!
```

--------------------------------

### Typst Rendering with Eval: True (Default)

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Compiles the Typst block as usual when `eval: true` (the default) is set.

```typst
//| eval: true
#import "@preview/cetz:0.4.2": canvas, draw
#canvas({
  draw.circle((0, 0), radius: 1)
  draw.line((-1, 0), (1, 0))
})
```

--------------------------------

### Render Defined Python Data in Typst

Source: https://m.canouil.dev/quarto-typst-render

Python data defined with `typst_define()` can be accessed and rendered in Typst using `#typst_define.<name>`.

```typst
#typst_define.label

#let df = typst_define.df
#let cols = df.keys()
#table(
  columns: cols.len(),
  table.header(..cols.map(c => [*#c*])),
  ..for i in range(df.at(cols.at(0)).len()) {
    cols.map(c => [#df.at(c).at(i)])
  }
)
```

--------------------------------

### Suppress Rendered Output in Typst

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Use `output: false` to skip compilation and suppress the rendered image. Combine with `echo: true` to display only the source code.

```typst
#set text(size: 14pt)
This source is visible, but the rendered image is suppressed.
```

--------------------------------

### Typst Rendering with Annotated Source and Code Fold

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Combines code annotations with `code-fold: true` for HTML output, allowing collapsible annotated source code.

```typst
1#set page(width: 8cm)
2#lorem(10)
```

--------------------------------

### Typst Rendering with Code Fold

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Collapses echoed source code in a `<details>` block for HTML output using `code-fold: true`. `code-summary` sets the disclosure text.

```typst
#set text(size: 14pt)
$ e^(i pi) + 1 = 0 $
```

--------------------------------

### Auto-Generated Filename from Label

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

When a label is provided in the YAML header, the output filename is automatically derived from it. This snippet demonstrates saving a Typst figure with a label.

```typst
```{typst}
//| label: fig-auto-saved
//| cap: "A block saved with an auto-generated filename."
//| output-directory: _output
//| format: png
#set text(size: 14pt)
#align(center)[
  #circle(radius: 0.8cm, fill: eastern.lighten(60%))
]
```
```

--------------------------------

### Persist Compiled Source Alongside Image

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Set `output-source: true` to save the compiled Typst source file alongside the generated image. This is useful for reproducibility, allowing the image to be recompiled from the source.

```typst
```{typst}
//| label: fig-with-source
//| cap: "Image saved with `.typ` source alongside."
//| output-directory: _output
//| output-source: true
//| format: png
#set text(size: 14pt)
#align(center)[
  Image and source are persisted together.
]
```
```

--------------------------------

### Inline Typst Rendering

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Render Typst expressions inline within text by using backticks with the `typst` class. The rendered image will scale to match the surrounding text size.

```typst
``{typst} #text(red)[hello]``
```

--------------------------------

### Hide Typst Block Entirely

Source: https://m.canouil.dev/quarto-typst-render

Setting `eval: false` and `echo: false` hides the Typst block completely, rendering neither the source code nor the output.

--------------------------------

### Disable Typst Compilation

Source: https://m.canouil.dev/quarto-typst-render

Use `eval: false` to display the source code without compiling it. This is useful for showing Typst code as is.

```typst
#import "@preview/cetz:0.4.2": canvas, draw
#canvas({
  draw.circle((0, 0), radius: 1)
  draw.line((-1, 0), (1, 0))
})
```

--------------------------------

### Typst Rendering with Eval: False

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Suppresses compilation of the Typst block, displaying only the source code when `eval: false` is set.

```typst
//| eval: false
#import "@preview/cetz:0.4.2": canvas, draw
#canvas({
  draw.circle((0, 0), radius: 1)
  draw.line((-1, 0), (1, 0))
})
```

--------------------------------

### Typst Rendering with Alignment

Source: https://m.canouil.dev/quarto-typst-render/example-revealjs.html

Controls the horizontal alignment of the rendered Typst image block within the document.

```typst
//| align: center
//| width: 8cm
#set text(size: 14pt)
A centred block.
```
Tokens:
Raw