Examples

Every attribute, rendered.

Text, background, border, opacity, gradient, and named style highlighting produced by the extension, with the source alongside each.

Everything below is coloured by the filter as this page is rendered.

Foreground and background

The colour attributes and their aliases.
Source	Renders as
`[Red text]{fg="#b22222"}`	Red textRed text
`[On yellow]{bg="#ffffcc"}`	On yellowOn yellow
`[White on red]{fg="#ffffff" bg="#b22222"}`	White on redWhite on red
`[Ink and paper]{ink="#ffffff" paper="#0000ff"}`	Ink and paperInk and paper

ink and paper are aliases of fg and bg; colour, color, bg-colour, and bg-color work too.

Borders

A border needs a colour; the style defaults to solid.

Border colours and styles.
Source	Renders as
`[Solid]{bc="#0000ff"}`	SolidSolid
`[Dashed]{bc="#b22222" bs="dashed"}`	DashedDashed
`[Dotted]{bc="#00aa00" border-style="dotted"}`	DottedDotted
`[Double]{bc="#b22222" bs="double"}`	DoubleDouble

Colour values

This page is HTML, which takes every form.

Accepted colour forms.
Source	Renders as
`[Named]{fg="firebrick"}`	NamedNamed
`[Functional]{fg="rgb(178 34 34)"}`	FunctionalFunctional
`[Short hex]{bg="#fcc"}`	Short hexShort hex

An invalid value is skipped with a warning rather than written out. Other formats are narrower, and Typst narrower still: the Reference gives the form to reach for in a document that renders to more than one.

Blocks

A div colours everything inside it.

::: {fg="#ffffff" bg="#b22222"}
A block with white text on a red background.

It can hold several paragraphs.
:::

A block with white text on a red background.

It can hold several paragraphs.

A block with white text on a red background.

It can hold several paragraphs.

With a border and a background:

::: {bc="#0000ff" bg="#f0f0f0" bs="dashed"}
A block with a blue dashed border.
:::

A block with a blue dashed border.

Opacity

opacity takes a number or a percentage, and applies to the background when there is one.

Opacity, in HTML and Typst only.
Source	Renders as
`[Half]{bg="#b22222" opacity="0.5"}`	HalfHalf
`[A quarter]{bg="#b22222" opacity="25%"}`	A quarterA quarter

Gradients

Blocks only, in HTML and Typst.

::: {gradient="#b22222, #abc123"}
A gradient from a list of colour stops.
:::

A gradient from a list of colour stops.

::: {gradient="linear-gradient(135deg, #0000ff, #ffffff)"}
A full CSS gradient value.
:::

A full CSS gradient value.

Brand colours

Name a colour once in _brand.yml and use the name everywhere:

color:
  palette:
    red: "#b22222"
  primary: "#abc123"

[Red text]{fg="red"}
[Primary highlight]{bg="primary"}

This site’s brand names its palette after the pastels it is drawn with, so the same syntax reaches those:

Brand colour names from the site’s own `_brand.yml`.
Source	Renders as
`[On mint]{bg="mint"}`	On mintOn mint
`[Coral text]{fg="coral-deep"}`	Coral textCoral text
`[Sage on paper]{fg="sage-deep" bg="paper" bc="sage"}`	Sage on paperSage on paper

A brand colour is resolved by the filter rather than by the browser, so the name reaches every format, Typst included. Given a light and dark brand pair, the same names follow both, and HTML switches between them with the theme.

Named styles

This page defines two styles in its front matter:

extensions:
  highlight-text:
    styles:
      alert:
        fg: "#ffffff"
        bg: "#b22222"
      boxed:
        bc: "#0000ff"
        bs: dashed

Named styles, an attribute that overrides one, and two styles merged.
Source	Renders as
`[Alert]{.alert}`	AlertAlert
`[Alert on black]{.alert bg="#000000"}`	Alert on blackAlert on black
`[Alert in a box]{.alert .boxed}`	Alert in a boxAlert in a box

The Reference gives the merge rules.

Other formats

This page is HTML, so the opacity and gradient sections above are the two features it can show that a PDF cannot. The repository’s example.qmd is rendered to every supported format on each release, and those files are attached to the release.

Source

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