# Using Markdown in shortcodes body

**URL:** <https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241>\
**Category:** Uncategorized\
**Created:** [November 11, 2019, 12:44pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241 "2019-11-11T12:44:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![HugoTrentesaux](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/hugotrentesaux/32/105_2.png) [@HugoTrentesaux](https://zola.discourse.group/u/HugoTrentesaux)\
**Post date:** [November 11, 2019, 12:44pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/1 "2019-11-11T12:44:34Z")

</div>

Is there a way to parse shortcode body as Markdown? For example with the quote shortcode from the doc :

```auto
<blockquote>
    {{ body }} <br>
    -- {{ author}}
</blockquote>

```

```auto
{% quote(author="Vincent") %}
A **markdown** quote
{% end %}

```

Could that be achieved with a markdown filter in Tera?

```auto
{{ body | markdown }}

```

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [November 12, 2019, 10:27am UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/2 "2019-11-12T10:27:19Z")

</div>

There is a markdown filter in Zola: [https://www.getzola.org/documentation/templates/overview/#markdown](https://www.getzola.org/documentation/templates/overview/#markdown)

---

<div class="post-metadata">

**Author:** ![HugoTrentesaux](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/hugotrentesaux/32/105_2.png) [@HugoTrentesaux](https://zola.discourse.group/u/HugoTrentesaux)\
**Post date:** [November 13, 2019, 9:14am UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/3 "2019-11-13T09:14:31Z")

</div>

Thank you! I thought I already read through the whole Zola and Tera documentation, but apparently not. Sorry for the “go to [RTFD.io](http://RTFD.io)” question 😃

---

<div class="post-metadata">

**Author:** ![dtron](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/dtron/32/289_2.png) [@dtron](https://zola.discourse.group/u/dtron)\
**Post date:** [July 5, 2020, 8:18pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/4 "2020-07-05T20:18:04Z")

</div>

I still didn’t get it after following that link (or reading through the [shortcodes doc](https://www.getzola.org/documentation/content/shortcodes/) several times), so I’m leaving this for anyone else who is having a hard time with it. (caveat: I’m not a programmer, but I’m managing to muddle through, so I’m sure this explanation is overkill for most on this forum, but this is the post that came up when I was searching for an answer.)

In order to get markdown to work in a shortcode, I had to add [safe](https://tera.netlify.app/docs/#safe) to the end of the `{{ body }}` in the shortcode file.

For example, I have a very simple shortcode to allow for different styles of messages/callouts, styled by css class. In an .md file (like a blog post), I reference it by inserting :

```
{% callout(class="warning") %}
    Message text goes here. It can use markdown features like **bold text**.
{% end %}

```

Then in `templates/shortcodes` I have a file named `callout.html` that contains:

```
<div class="message" {% if class %}class="{{class}}"{% endif %}>
    {{ body | markdown | safe }}
</div> 

```

It works just like normal markdown, so you can have multiple paragraphs, text formatting, links, etc.

---

<div class="post-metadata">

**Author:** ![utensil](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/utensil/32/274_2.png) [@utensil](https://zola.discourse.group/u/utensil)\
**Post date:** [July 25, 2020, 8:21am UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/5 "2020-07-25T08:21:30Z")

</div>

Thanks for the tips, `{{ body | markdown | safe }}` got markdown working, but shortcode still doesn’t work, that is if I have another shortcode and what to use it in the body, it will be rendered as raw `{{ short_code_name ... }}`.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/bwintx/32/300_2.png) [@bwintx](https://zola.discourse.group/u/bwintx)\
**Post date:** [February 5, 2021, 1:14pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/6 "2021-02-05T13:14:08Z")

</div>

Same problem here. Shortcode in `yellowBox.html` is:

```auto
<p class="yellowBox">
   {{ body | markdown | safe }}
</p>

```

…with the CSS class putting it in a yellow box, as you can guess. When I try it in Markdown…

```markdown
{% yellowBox %}
  **Hello** , this should be in a yellow box.
{% end %}

```

I get the following HTML:

```auto
<p>
   {% yellowBox %}
<strong>Hello</strong>, this should be in a yellow box. {% end %}
<p>

```

…while it **should** be:

```auto
<p class="yellowBox"><strong>Hello</strong>, this should be in a yellow box.</p>

```

Is this a known and continuing bug, given the age of this thread?

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [February 5, 2021, 1:56pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/7 "2021-02-05T13:56:15Z")

</div>

Try

```auto
{% yellowBox() %}
  **Hello** , this should be in a yellow box.
{% end %}

```

with the `()`, otherwise it’s not recognized as a shortcode

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/bwintx/32/300_2.png) [@bwintx](https://zola.discourse.group/u/bwintx)\
**Post date:** [February 5, 2021, 2:10pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/8 "2021-02-05T14:10:40Z")

</div>

@keats Thanks very much! Only remaining glitch was that it didn’t care for my using `<p>` rather than `<div>`, but that obviously was an easy fix.

---

<div class="post-metadata">

**Author:** ![Geobomatic](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/geobomatic/32/109_2.png) [@Geobomatic](https://zola.discourse.group/u/Geobomatic)\
**Post date:** [April 19, 2025, 10:13am UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/9 "2025-04-19T10:13:33Z")

</div>

Sorry for necro this topic, I notice that links in this the “footnote” format does not work

```auto
<span>
  <input id="note_{{nth}}" type="checkbox" />
  <label for="note_{{nth}}">
    <sup title="{{ body }}">Note</sup>
  </label>
  <span>{{ body | markdown(inline=true) | safe }}</span>
</span>

```

this works

```auto
{% note() %}
Some footnote with some [md](https://geobert.fr) in it.
{% end %}

```

this does not

```auto
{% note() %}
Some footnote with some [md][blog] in it.
{% end %}

[blog]: https://geobert.fr

```

it got rendered as

```auto
Some footnote with some [md][blog] in it.

```

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [April 22, 2025, 11:43am UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/10 "2025-04-22T11:43:55Z")

</div>

The body of a shortcode is its own document so its content need to be contained inside.

---

<div class="post-metadata">

**Author:** ![Geobomatic](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/geobomatic/32/109_2.png) [@Geobomatic](https://zola.discourse.group/u/Geobomatic)\
**Post date:** [April 22, 2025, 12:20pm UTC](https://zola.discourse.group/t/using-markdown-in-shortcodes-body/241/11 "2025-04-22T12:20:05Z")

</div>

Oh I see, too bad, it can’t reuse existing one in the enclosing doc then 🙂 Ta