Markdown lists and markdownify in shortcodes

support
1

Hi,

I’m having some issues with embedding html in markdown lists, using a shortcode.
Here’s a minimal example:

Shortcode, called callout:

<div class="alert alert-{{ .Get 0 }}">
  <div>
    {{ .Inner | markdownify | emojify  }}
  </div>
</div>

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 &hellip;
      </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?

2 
- List item.
- List item, where I want the alert.
{{< callout note >}}
Callout **note**, with indent ...
{{< /callout >}}
- List item.
3

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.

4

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 &hellip;</div>
    </div>
  </li>
  <li>List item.</li>
</ul>
5

Strange! I don’t. I get this:

<ul>
  <li>List item.</li>
  <li>List item, where I want the alert:</li>
</ul>
<div class="alert alert-note">
  <div>
    Callout <strong>note</strong>, no indent &hellip;
  </div>
</div>
<ul>
  <li>List item.</li>
</ul>

The markdown render is set to Goldmark, in case that’s important.

6

You are not using the markdown that I posted.
You are still using the {{% foo %}} notation.

7

Holy shit! I missed that.
Just looked at the docs. I’m not sure I get the difference between % and <?

8

This might help.
https://discourse.gohugo.io/t/render-link-functionality-not-working/26358/13

9

I see. That quite clear.
Thank you very much for the quick reply :smiley: