# Access to Token Stream in Markdown Rendering **URL:** \ **Category:** Uncategorized\ **Created:** [December 18, 2024, 5:49am UTC](https://zola.discourse.group/t/access-to-token-stream-in-markdown-rendering/2417 "2024-12-18T05:49:50Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![ender-yoga](https://avatars.discourse-cdn.com/v4/letter/e/90ced4/32.png) [@ender-yoga](https://zola.discourse.group/u/ender-yoga)\ **Post date:** [December 18, 2024, 5:49am UTC](https://zola.discourse.group/t/access-to-token-stream-in-markdown-rendering/2417/1 "2024-12-18T05:49:50Z")
hi, I’m using shortcodes to augment my articles. I’d like to improve the SEO by having HTML render on the server side instead of having to render it using Javascript. Here is an example of what I’m attempting to do in Zola/Rust instead of Javascript - [ECharts TreeMap & Zola](https://ender.yoga/articles/tree-map/) Obviously I can’t render a chart on the server, but for simpler components such as a hero or something else? I’d like the body of the shortcode to be available in Zola/Rust and then I’d like to apply an HTML template to it accordingly. Is this possible with the current Zola APIs? Thank you ---
**Author:** ![spence](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/spence/32/1022_2.png) [@spence](https://zola.discourse.group/u/spence)\ **Post date:** [December 24, 2024, 4:10pm UTC](https://zola.discourse.group/t/access-to-token-stream-in-markdown-rendering/2417/2 "2024-12-24T16:10:41Z")
> Obviously I can’t render a chart on the server Hey, I’m not sure why a tree map couldn’t be rendered using shortcodes? Is it because you have to receive user-supplied information dynamically? Because otherwise you can probably do it. Is it because of recursion? Anyways, maybe with a little clarification that could be done. (btw there’s no server in Zola, everything is compiled in advance.) > I’d like the body of the shortcode to be available in Zola/Rust and then I’d like to apply an HTML This part I’m a little unclear about. You can put html in a shortcode body already. So do you want to apple an html template to html? Or maybe I misunderstood. ---
**Author:** ![ender-yoga](https://avatars.discourse-cdn.com/v4/letter/e/90ced4/32.png) [@ender-yoga](https://zola.discourse.group/u/ender-yoga)\ **Post date:** [December 26, 2024, 5:33am UTC](https://zola.discourse.group/t/access-to-token-stream-in-markdown-rendering/2417/3 "2024-12-26T05:33:15Z")
hi @spence , thank you for reading. Let me expand on my original post Today, I have implemented echarts using a shortcodes. However the content of that shortcode is a [Markdown List.](https://github.com/ender-yoga/ender.yoga/blob/main/articles/tree-map/index.html#L144) I then take that value an run it through `markdownit`. Which works well enough for Javascript. However, I’d like to instead render HTML from the shortcode [( Gist with files to reference for the rest of the post )](https://gist.github.com/jbcurtin/1d80fbad95cbd34bcb6b466f041ecbe2) - Input: chart\_\_shortcode.md.txt - HTML Output: Desired Output.html I’d like this feature to improve SEO compatibility with more search engines. How can I modify the shortcode token stream to output HTML instead of just the body(Current Output.html) of the shortcode? ---
**Author:** ![spence](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/spence/32/1022_2.png) [@spence](https://zola.discourse.group/u/spence)\ **Post date:** [December 26, 2024, 6:18pm UTC](https://zola.discourse.group/t/access-to-token-stream-in-markdown-rendering/2417/4 "2024-12-26T18:18:10Z")
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](https://www.getzola.org/documentation/templates/overview/#markdown)). For example ```jinja {% set h1 = "# This is an h1 header in markdown" %} {{ h1 | markdown }} ``` Will produce the literal text ```html

This is an h1 header in markdown

``` (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](https://www.getzola.org/documentation/content/shortcodes/#shortcodes-with-body) 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`: ```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: ```html

This is a demo of accepting markdown as a shortcode body argument and rendering it as html

{% set html = body | markdown %}

The literal html text is as follows:

{{ html }}

And the text renders as follows:

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