Aligning a Callout Block to an Indented List item above it and also render the bullet point of the indented list item

[aaronplays]

What I’m trying to do

I’m trying to align a callout block to the indented list item above it and render the bullet points.

I have list containing another layer of lists, to which I want to align the left side of the callout block. I’m able to align the block, but it removes the bullet points from rendering.

I hope this screenshot shows what I want to do–

Things I have tried

• Adding a space above the callout block
• Adding space after callout block
• Adding a “-” before callout block starting > [!info]

[dawni]

I don’t know the reason that a top-level list item can hold a callout (and align the callout to the list content) while a nested list item seems like it won’t.

However, if your concern is just the appearance/location of the callout with dot lists (not sub-numbered lists), then a CSS snippet might be the way to go.

Here’s an example. When you want to align a callout with an indented list, put |indent1 in the callout metadata:

> [!note | indent1]

to get this result:

using this snippet:

:is(.markdown-source-view, *) .callout[data-callout-metadata~="indent1"] {
	margin-inline-start: calc(var(--list-indent) + 24px);
}

:is(.markdown-source-view, *) .callout[data-callout-metadata~="indent2"] {
	margin-inline-start: calc(2 * var(--list-indent) + 24px);
}

It includes a level 2 version too, |indent2, so you can see how to extend it to mroe levels if you want.

(how to use CSS snippets)

[dawni]

After all that snippeting I feel silly, because you can do it in the rendered markdown. No tricks, just syntax.

Paste this to see how:

- item
> [!note]
> callout content

- item
	- subitem
	> [!note]
	> callout content

- item
	- subitem
		- subitem
		> [!note]
		> callout content

The above gives me this by default:

[aaronplays]

Thanks for your replies. Don’t worry about feeling silly, I’m right up there with you, because I did try exactly what you did but I didn’t check it in Reader Mode.

In the Editor Mode, the callouts aren’t rendered like that when I indent them. They appear as code blocks for some reason.