# Writing Shortcodes for Text Formatting

**URL:** https://zola.discourse.group/t/writing-shortcodes-for-text-formatting/804
**Category:** Uncategorized
**Created:** [February 24, 2021, 6:45am UTC](https://zola.discourse.group/t/writing-shortcodes-for-text-formatting/804 "2021-02-24T06:45:21Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![joesan](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/joesan/32/448_2.png) [@joesan](https://zola.discourse.group/u/joesan)
#### Post date: [February 24, 2021, 6:45am UTC](https://zola.discourse.group/t/writing-shortcodes-for-text-formatting/804/1 "2021-02-24T06:45:21Z")

</div>

I would like to use some color for my Markdown text and I want to avoid cluttering my Markdown files with HTML elements. I got to learn that I could use Shortcodes to encapsulate the HTML and use that in my Markdown. But I’m not sure how to get started. Here is what I have tried!

```
<div class="text-color">
     <span style="color:red"></span>
</div>

```

Is that correct? How do I make the color as a parameter?

---

<div class="post-metadata">

### Author: ![Roman](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@Roman](https://zola.discourse.group/u/Roman)
#### Post date: [February 24, 2021, 8:54am UTC](https://zola.discourse.group/t/writing-shortcodes-for-text-formatting/804/2 "2021-02-24T08:54:50Z")

</div>

you should create inside templates folder shortcodes, and there create .html-template (lets entitle it _test.html_) with your shortcode like:

```auto
<div class="text-color">
    <span {% if color %}style="color: {{color}}"{% endif %}">{{ text }}</span>
</div>

```

Save it, and now you can add to your .md

```auto
{{ test(color="red" text="Blabla") }}

```

---

<div class="post-metadata">

### Author: ![aphoenix](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/aphoenix/32/371_2.png) [@aphoenix](https://zola.discourse.group/u/aphoenix)
#### Post date: [February 24, 2021, 8:56pm UTC](https://zola.discourse.group/t/writing-shortcodes-for-text-formatting/804/3 "2021-02-24T20:56:52Z")

</div>

You can also create shortcodes that allow you to put content in the body, so you could do something like this:

```auto
<div class="text-color">        
  <span {% if color %}style="color: {{color}}"{% endif %}">
    {{ body | markdown | safe }}
  </span>
</div>

```

Then you can use the shortcode like this:

```auto
{% test(color="red") %}
  Blablabla
{% end %}

```