Is it possible in quarto to create custom cross-references to callout blocks?

user_4233642 0
Viewed 284

Task

I'm using quarto to write an online book and need to mimic the environments and counters of a published book. The latter employs five custom framed environments (examples, exercises, remarks, theorems, definitions) with a joined counter (within the chapter).

I'm considering to use the readily available callout blocks for these because these are styled quite nicely by default. I haven't been successful, though, to create a custom counter for these callout blocks so that I can cross-reference from the text. Is there a way to do so?

(Remark: I've also tried to do this via standard amsthm environments provided through quarto, see Shared counter in quarto for exercises, examples, etc.)

Demo

I would have hoped that something like the following existed so that I can create a new #callout counter. But I couldn't find infrastructure for this:

The first definition is @callout-1.

:::{.callout-note}
## Definition {#callout-1}
This should be Definition 1.1.
:::

It is followed by the first example, @callout-2

:::{.callout-tip}
## Example {#callout-2}
This should be Example 1.2.
:::

Because this doesn't work like this quarto renders this to:

callout block example as rendered by quarto

But what I'm looking for is a result like this:

callout block example with desired rendered (mimicked manually)

quarto pandoc r-markdown
2 Answers

The only way I was able to do this was to add an ID to the callout

::: {#callout-1 .callout-note}
## Definition {#callout-1}
This should be Definition 1.1.
:::

And then manually call it in your markdown through:

Please refer to the [note 1](#callout-1)
user_37908650

You can refer Examples or Exercises within callout blocks by extending this answer to your other question related to this question, like this,

# Introduction


The first example is @exm-1.

::: {#exm-1}
This should be Example 1.1.
:::

It is followed by the first exercise, [Exercise @exm-2]

::: {#exm-2 .custom}
This should be Exercise 1.2.
:::


:::: {.callout-note}

::: {#exm-3}
This should be Example 1.3
:::

::::

:::: {.callout-tip}

::: {#exm-4 .custom}
This should be Exercise 1.4
:::

::::

Please refer to the @exm-3

Please refer to the [Exercise @exm-4]

and add these two lines in your project yaml _quarto.yaml

_quarto.yaml

callout-appearance: simple
callout-icon: false

The rendered output looks like,

custom_callout_reference

Again, Note that when you want to render the Example environments as Exercise, use the .custom class, so that the javascript code written in this post will apply.

Also, you can also write javascript code to handle the Definition tag in the same way as this.

user_108583210
Related