Result div after code block with annotation

[pawamoy]

I'm trying to concatenate a result div after a code block with an annotation, within a tab. The issue is that the annotation is in between the code block and the result div, so the result div is not styled accordingly: it doesn't have borders and it is not concatenated to the block above.

Example:

=== ":simple-pipx: pipx"

    ```bash
    pipx install griffe  # (1)!
    ```

    1. You can also directly run Griffe with `pipx run griffe <args>`. Tool-only installation (no library use).

    <div class="result" markdown>

    [pipx](https://pipx.pypa.io/stable/) allows to install and run Python applications in isolated environments.

    </div>

=== ":simple-pdm: pdm"

    ```bash
    pdm add griffe
    ```

    <div class="result" markdown>

    [PDM](https://pdm-project.org/en/latest/) is an all-in-one solution for Python project and dependency management.

    </div>

The PDM tab shows up like this:

While the pipx tab shows up like this:

I have tried many alternative sequences of markup, but none of them worked.

• Putting the list in the result div breaks the annotation

=== ":simple-pipx: pipx"

    ```bash
    pipx install griffe  # (1)!
    ```

    <div class="result" markdown>

    1. You can also directly run Griffe with `pipx run griffe <args>`. Tool-only installation (no library use).

    [pipx](https://pipx.pypa.io/stable/) allows to install and run Python applications in isolated environments.

    </div>

• Wrapping the code block and list in a div just separates the code block from the tab header and doesn't resolve the original issue

=== ":simple-pipx: pipx"

    <div markdown>

    ```bash
    pipx install griffe  # (1)!
    ```

    1. You can also directly run Griffe with `pipx run griffe <args>`. Tool-only installation (no library use).

    </div>

    <div class="result" markdown>

    [pipx](https://pipx.pypa.io/stable/) allows to install and run Python applications in isolated environments.

    </div>

• Wrapping everything in the result div has no effect

=== ":simple-pipx: pipx"

    <div class="result" markdown>

    ```bash
    pipx install griffe  # (1)!
    ```

    1. You can also directly run Griffe with `pipx run griffe <args>`. Tool-only installation (no library use).

    [pipx](https://pipx.pypa.io/stable/) allows to install and run Python applications in isolated environments.

    </div>

I know the result CSS class is not really public API, but can you think of a way to make this work 🤔?

[pawamoy]

I notice that the bullet list ends up being empty after processing (client side I suppose):

<ol hidden="">
<li></li>
</ol>

I also notice that removing it restores the expected behavior of the next result div. So maybe additionally/instead to emptying the unordered list and hiding it with hidden="", MfM could remove it?

[squidfunk]

Indeed, the result needs to be directly after the code block. The list remains there in case you print a document, which will move annotations back into the list. Otherwise, annotations can not be printed. It's kind of an edge case that's definitely not optimal right now, but I'm not sure how we can improve it without sacrificing other functionality.

[pawamoy]

Thanks for the explanation! Probably naive suggestion: isn't it possible to move back the annotations below by re-creating a list? Or maybe you indeed need to keep it there to know if it was an ordered vs unordered list (or to preserve CSS classes on li, etc.)?

In any case, I understand that my use-case is quite niche and probably isn't worth lots of effort 😄 I'll find a workaround 🙂

Thanks again!

[squidfunk]

Yes, that would be possible. As you know, we're currently frying much bigger fish, so it's a low priority, but if someone (you?) wants to go ahead, a PR is more than welcome ☺️ Here's the part that finds and mounts code annotations:

mkdocs-material/src/templates/assets/javascripts/components/content/code/_/index.ts

Lines 208 to 228 in ccc8d84

	const container = el.closest(".highlight")
	if (container instanceof HTMLElement) {
	const list = findCandidateList(container)
	/* Mount code annotations, if enabled */
	if (typeof list !== "undefined" && (
	container.classList.contains("annotate") ||
	feature("content.code.annotate")
	)) {
	const annotations$ = mountAnnotationList(list, el, options)
	content$.push(
	watchElementSize(container)
	.pipe(
	takeUntil(done$),
	map(({ width, height }) => width && height),
	distinctUntilChanged(),
	switchMap(active => active ? annotations$ : EMPTY)
	)
	)
	}
	}

And here's where toggling on print is implemented:

mkdocs-material/src/templates/assets/javascripts/components/content/annotation/list/index.ts

Lines 182 to 196 in ccc8d84

	/* Handle print mode - see https://bit.ly/3rgPdpt */
	print$.pipe(takeUntil(done$))
	.subscribe(active => {
	el.hidden = !active
	/* Add class to discern list element */
	el.classList.toggle("md-annotation-list", active)
	/* Show annotations in code block or list (print) */
	for (const [inner, child] of pairs)
	if (!active)
	swap(child, inner)
	else
	swap(inner, child)
	})

Additionally, please note that we could also've copied the elements and injected them, but this would mean that any event handlers registered by the author for elements inside those annotation list items would be lost and need to be rebound. Thus, I opted for a much more conservative approach: move them out and move them back when necessary.

[pawamoy]

Awesome, if PRs are accepted, I might give it a try, thanks for letting me know 🙂 TypeScript is not my usual bowl of soup though 🫠

[squidfunk]

Sure!