Zola: How to get syntax highlighting in shortcodes?

Created on 11 Feb 2020 · 12Comments · Source: getzola/zola

Bug Report

Syntax highlighting is not applied within a shortcode block properly.

Suppose we want to create a shortcut to mimic the details/summary collapsible section in markdown that GitHub and others use.

<details>
    <summary>{{ summary }}</summary>

{{ body | markdown(inline=true) | safe }}

</details>

Then, if we try and apply the shortcode as follows, with syntax highlighting enabled.

````
{% details(summary="Click Here") %}

<item>
  <title>Some title</title>
  <link>www.example.com</link>
</item>

{% end %}

<item>
  <title>Some title</title>
  <link>www.example.com</link>
</item>

````

Environment

Ubuntu 18.04

Zola version:
0.9.0

Expected Behavior

Tell us what should have happened.

We would expect that syntax highlighting is applied for both blocks of code.

Current Behavior

Tell us what happens instead of the expected behavior.

Instead, we see that the they are not rendered the same:
screenshot

With the corresponding source:

<details>
    <summary>Click Here</summary>
<pre><code class="language-xml">&lt;item&gt;
  &lt;title&gt;Some title&lt;/title&gt;
  &lt;link&gt;www.example.com&lt;/link&gt;
&lt;/item&gt;
</code></pre>
</details>
<pre style="background-color:#fdf6e3;">
<span style="color:#93a1a1;">&lt;</span><span style="color:#268bd2;">item</span><span style="color:#93a1a1;">&gt;
  &lt;</span><span style="color:#268bd2;">title</span><span style="color:#93a1a1;">&gt;</span><span style="color:#657b83;">Some title</span><span style="color:#93a1a1;">&lt;/</span><span style="color:#268bd2;">title</span><span style="color:#93a1a1;">&gt;
  &lt;</span><span style="color:#268bd2;">link</span><span style="color:#93a1a1;">&gt;</span><span style="color:#657b83;">www.example.com</span><span style="color:#93a1a1;">&lt;/</span><span style="color:#268bd2;">link</span><span style="color:#93a1a1;">&gt;
&lt;/</span><span style="color:#268bd2;">item</span><span style="color:#93a1a1;">&gt;
</span></pre>

Step to reproduce

Please provide the steps to reproduce the issue.

Use the shortcode and markdown file provided in the description.

done enhancement

Source

lukehsiao

Most helpful comment

Change the builtin markdown filter to use the markdown renderer from the renderer crate I think

Keats on 5 Mar 2020

👍4

All 12 comments

I should follow up that this is currently expected behavior, as the built-in markdown filter does NOT apply all the features of zola (see https://www.getzola.org/documentation/templates/overview/).

This is a question of what is the proper way to accomplish syntax highlighting in this type of scenario?

lukehsiao on 11 Feb 2020

It should be possible to make the filter almost equivalent to the normal rendered with some work and that would be the recommended way to highlight things.
For your specific example though, it looks like you could just render the page in Zola as usual though with the built-in summary feature?

Keats on 11 Feb 2020

👍1

In my actual use case this is shortcode would appear much later in the document, and several times, so the Page summary is not useful (unless I'm misunderstanding what you are suggesting).

Sounds like this will be a feature request then. I'd love to have the markdown filter be enhanced to support this.

lukehsiao on 11 Feb 2020

@Keats, do you have pointers to how this could be cleanly implemented in Zola?

lukehsiao on 5 Mar 2020

Change the builtin markdown filter to use the markdown renderer from the renderer crate I think

Keats on 5 Mar 2020

👍4

If this change would also enable the markdown filter to render shortcodes from within the body of a shortcode (which is something I'd want), note that you'll also need to change how shortcodes are parsed such that {% outershortcode() %}{% innershortcode() %}some-content{% end %}{% end %} work such that outershortcode isn't greedily closed by the first end it encounters.