Writing Shortcodes for Text Formatting

1

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?

2

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

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

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

{{ test(color="red" text="Blabla") }}
3 Likes
3

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

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

Then you can use the shortcode like this:

{% test(color="red") %}
  Blablabla
{% end %}
1 Like