Examples

Typst, compiled as this page builds.

Typst figures, tables, equations, and inline expressions compiled to images by the extension, with the options that shape them.

Every figure below is compiled by the Typst binary Quarto ships, as this page is rendered. The site asks for SVG, so they stay sharp at any zoom:

extensions:
  typst-render:
    format: svg

A figure

```{typst}
#circle(radius: 1cm, fill: blue)
```

#circle(radius: 1cm, fill: blue)

A table

```{typst}
#table(
  columns: 3,
  [*Format*], [*Writer*], [*Figures*],
  [HTML], [html], [image],
  [PDF], [latex], [image],
  [Typst], [typst], [native or image],
)
```

#table( columns: 3, [*Format*], [*Writer*], [*Figures*], [HTML], [html], [image], [PDF], [latex], [image], [Typst], [typst], [native or image], )

An equation

$ integral_0^1 x^2 dif x = 1/3 $

Inline expressions

An inline expression scales to the text around it, so a red word #text(red)[hello] sits in a sentence, and so does a formula $ x^2 + y^2 = z^2 $.

Give it alt text for a reader who cannot see it:

The area is `{typst} $pi r^2$`{alt="pi r squared"} for a circle of radius r.

Without an alt attribute the Typst source is used instead.

Note

Inline Typst is not available in PowerPoint, since Pandoc cannot put an image inside a run of text there. Blocks work normally.

Showing the source

echo puts the Typst beside its output, and code-fold tucks it away:

```{typst}
//| echo: true
//| code-fold: true
#circle(radius: 0.6cm, fill: green)
```
Code 
#circle(radius: 0.6cm, fill: green)

#circle(radius: 0.6cm, fill: green)

Per-block options use the comment and pipe form, //| key: value, at the top of the block.

Source

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

Every release attaches example-render.tar.gz, that same file rendered to HTML, Typst, PDF through each of the three LaTeX engines, RevealJS, Beamer, Word, and PowerPoint. It is on the latest release, and is the way to see one source come out as figures in nine outputs.

Back to top