# Markdown lists and markdownify in shortcodes

**URL:** <https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349>\
**Category:** support\
**Created:** [August 18, 2021, 10:40pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349 "2021-08-18T22:40:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![christian88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/christian88/32/12519_2.png) [@christian88](https://discourse.gohugo.io/u/christian88)\
**Post date:** [August 18, 2021, 10:40pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/1 "2021-08-18T22:40:56Z")

</div>

Hi,

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

Shortcode, called callout:

```auto
<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):

```auto
- 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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2021, 11:04pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/2 "2021-08-18T23:04:37Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![christian88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/christian88/32/12519_2.png) [@christian88](https://discourse.gohugo.io/u/christian88)\
**Post date:** [August 18, 2021, 11:25pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/3 "2021-08-18T23:25:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2021, 11:28pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/4 "2021-08-18T23:28:10Z")

</div>

If you use the markdown I posted, you will get this HTML:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![christian88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/christian88/32/12519_2.png) [@christian88](https://discourse.gohugo.io/u/christian88)\
**Post date:** [August 18, 2021, 11:31pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/5 "2021-08-18T23:31:54Z")

</div>

Strange! I don’t. I get this:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2021, 11:34pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/6 "2021-08-18T23:34:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![christian88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/christian88/32/12519_2.png) [@christian88](https://discourse.gohugo.io/u/christian88)\
**Post date:** [August 18, 2021, 11:37pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/7 "2021-08-18T23:37:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2021, 11:42pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/8 "2021-08-18T23:42:46Z")

</div>

This _might_ help.  
[https://discourse.gohugo.io/t/render-link-functionality-not-working/26358/13](https://discourse.gohugo.io/t/render-link-functionality-not-working/26358/13)

---

<div class="post-metadata">

**Author:** ![christian88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/christian88/32/12519_2.png) [@christian88](https://discourse.gohugo.io/u/christian88)\
**Post date:** [August 18, 2021, 11:45pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/9 "2021-08-18T23:45:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 20, 2021, 11:46pm UTC](https://discourse.gohugo.io/t/markdown-lists-and-markdownify-in-shortcodes/34349/10 "2021-08-20T23:46:37Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.