I’m still a little confused, but let’s see if I understand you correctly and you tell me where I’m wrong.
The first thing is going from markdown → html in Zola. If you’re just looking to take markdown and produce html using zola there is a filter to do that called markdown
(docs). For example
{% set h1 = "# This is an h1 header in markdown" %}
{{ h1 | markdown }}
Will produce the literal text
<h1 id="this-is-an-h1-header-in-markdown">This is an h1 header in markdown</h1>
(and then if you don’t want the just literal html as literal text, but rather rendered html then you can pipe it to safe, e.g. {{ h1 | markdown | safe }}
)
The second thing is about your example. I’m a little confused by it. Based on its title, chart__shortcode.md.txt
looks like it’s supposed to be the shortcode itself, but the syntax is how you’re supposed to call a shortcode from your markdown, i.e. you should be using syntax like that from index.md
.
It may be helpful to take a look at the part of the Zola docs where it discusses calling a shortcode with a body argument. Here is the relevant part of the documentation for that.
With that said, I think this is how I would do what I think you’re trying to do.
In your index.md
:
# Example Title
I made this escharts thing. This is how it looks:
{% chart__tree_map(name='first-map', min_height=200) %}
- Root
- Backend Framework
- Django
- Rocket.rs
- Frontend Framework
- VueJS
- ReactJS
{% end %}
Then you would have another file called chart__tree_map.html
, located at templates/shortcodes/chart__tree_map.html
as follows:
<p>This is a demo of accepting markdown as a shortcode body argument and rendering it as html</p>
{% set html = body | markdown %}
<p>The literal html text is as follows:</p>
{{ html }}
<p>And the text renders as follows:</p>
{{ html | safe }}
The third and final thing is that in your example, in Desired Output.html
, you don’t just render a direct translation but you also modified the output to have an id that didn’t exist in your input markdown, e.g. <ul id="{{name}}-template">
.
You can still do this in the way that I wrote the shortcode above, but you will have to manually do some string processing using some of the other filters to achieve this. Probably split
docs, join, and regex_replace are your best friends for this.
I hope that’s helpful!