Examples

Every transform, rendered.

One source div reused several ways by the extension: plain, shifted, truncated, remapped, into a styled container, and with variables filled in.

Everything below is produced by the filter as this page is rendered, from the sources defined at the top. This site configures the extension in _quarto.yml:

div-reuse:
  limit: 3
  vars:
    project: "Quarto Extensions"
    author:
      name: "Mickaël Canouil"

The sources

Two divs, defined once and reused throughout the page.

::: {#house-style}
Commit early, commit often, and write the message for the reader.
:::

::: {#report}
# Findings

The first top-level block of the report.

## Method

The second heading, so shifting has something to move.

::: {#report-note}
A nested div with an identifier of its own.
:::
::::

Commit early, commit often, and write the message for the reader.

Findings

The first top-level block of the report.

Method

The second heading, so shifting has something to move.

A nested div with an identifier of its own.

A plain reuse

::: {reuse="house-style"}
:::

Commit early, commit often, and write the message for the reader.

Shifting headings

The report starts at level one, which would sit above the headings on this page.

::: {reuse="report" reuse-filter="shift-headings=3" reuse-take="4"}
:::

Findings

The first top-level block of the report.

Method

The second heading, so shifting has something to move.

Level one becomes level four and level two becomes level five, so both sit under this section. reuse-take drops the nested div at the end of the source, which would otherwise arrive with the identifier it already has here.

Taking part of it

reuse-take keeps only the first few top-level blocks.

::: {reuse="report" reuse-take="2" reuse-filter="shift-headings=3"}
:::

Findings

The first top-level block of the report.

The heading and the paragraph after it are kept, and everything below is dropped, including the nested div. The headings are shifted here as well, to keep them under this section; take counts the blocks of the source, so it makes no difference which of the two is written first.

Renaming identifiers

A plain reuse copies identifiers along with the content, which puts duplicates in the document. id-remap renames them on the way in.

::: {reuse="report" reuse-filter="shift-headings=3,id-remap=report-note->report-note-copy"}
:::

Findings

The first top-level block of the report.

Method

The second heading, so shifting has something to move.

A nested div with an identifier of its own.

The nested div arrives as report-note-copy, so the source keeps sole ownership of report-note. Several mappings are separated by ;.

Reusing into a styled container

The destination keeps its own identifier, classes, and attributes; only its children are replaced, so reuse can go straight on a container.

::: {.border .rounded .p-3 reuse="house-style"}
:::

Commit early, commit often, and write the message for the reader.

The framed blocks elsewhere on this page wrap the reuse in a container instead, which comes to the same thing.

Reusing into a callout

A callout is the exception. Quarto expands its callouts before user filters run, so reuse on a .callout-tip div fills the div underneath rather than the rendered callout body, and nothing appears:

::: {.callout-tip title="House style" reuse="house-style"}
:::

Put the callout in the source instead:

::: {#tip-source}
::: {.callout-tip title="House style"}
Commit early, commit often.
:::
:::

::: {reuse="tip-source"}
:::
TipHouse style

Commit early, commit often.

TipHouse style

Commit early, commit often.

Variables

Tokens in the source are filled in from div-reuse.vars when the content is reused.

::: {#greeting}
Written for {{project}}, signed {{author.name}}.
:::

::: {reuse="greeting"}
:::

Written for {{project}}, signed {{author.name}}.

Written for Quarto Extensions, signed Mickaël Canouil.

Dotted paths reach nested keys. A name with no value is left as written and warned about once.

Source

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

Back to top