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

Question

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:

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

Answer 1

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)

Answer 2

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,

---

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.

Answer 3

I was looking for a workaround in a similar that allows me to define groups of jointly numbered environments (for html and pdf) without extra hacks. I put my solution in an extension. It does for the time being only support crossreference by \ref, and maybe it becomes obsolete with quarto 1.4? You can modify the appearance / colors for each type of environment from the yaml.

filters:
  - custom-numbered-blocks
custom-numbered-blocks:
  groups: 
    thmgroup: 
      boxstyle: foldbox.simple
      collapse: false
  classes:
    Example:
      group: thmgroup
    Definition:
      group: thmgroup
      colors: [cce7b1, 86b754]

Then

# First Section

The first definition is Definition \ref{mydef}

::: {.Definition #mydef}

This should be Definition \ref{mydef}

:::

It is followed by the first example, Example \ref{myexpl}

::: {.Example #myexpl}

### an example for Definition \ref{mydef}

This should be Example \ref{myexpl}
:::

renders in html

or in pdf

To change the overall appearance of the boxes, you would currently need to modify a css / tex file.

The extension is here: https://github.com/ute/custom-numbered-blocks