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

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.