In a post, I want to include an alert (using the shortcode in a list):
- List item.
- List item, where I want the alert.
{{% callout note %}}
Callout note, with indent ...
{{% /callout %}}
- List item.
The rendered html is a mess! Where <pre><code> blocks are inserted and extra closing </div> appear, messing up whatever is below.
If I remove markdownify from the shortcode, everything is well behaved.
The well behaved rendered html is the following:
<ul>
<li>
<p>List item.</p>
</li>
<li>
<p>List item, where I want the alert.</p>
<div class="alert alert-note">
<div>
Callout note, with indent …
</div>
</div>
</li>
<li>
<p>List item.</p>
</li>
</ul>
Am I missing something obvious or is there a way I can implement a workaround?
I’m not sure I understand what you’re trying to tell me.
Let me try to explain my issue.
If I don’t indent the callout shortcode, then the rendered html is two separate lists with an alert block sandwiched between them. I want the alert block to be a part of the list item, so it’s also indented with the rest of the list items.
But when I indent the shortcode, the rendered html is messed up. As I mentioned above, I can get the desired html if I remove markdownify from the shortcode.
If you use the markdown I posted, you will get this HTML:
<ul>
<li>List item.</li>
<li>
List item, where I want the alert.
<div class="alert alert-note">
<div>Callout <strong>note</strong>, with indent …</div>
</div>
</li>
<li>List item.</li>
</ul>