Render templating code inside highlight tag

[benbrehaut]

Hi 👋

Thanks for the great plugin!

I am currently looking at moving a Jekyll site to Eleventy, where we have a pattern page with a code block showing that pattern's HTML:

_code.html (file)

{% highlight html %}
  {% include folder-example/file-example %}
{% endhighlight %}

With Jekyll, this will actually include the file and output the HTML inside the file:

/pattern (web page)

<div class="pattern-example">
  <p>Hello, I am a pattern</p>
</div>

This is great, as any changes made to the code get reflected in the pattern code block for developers to see.

With the plugin, it actually renders out what is exactly contained inside the {% highlight %} tag:

_code.liquid (file)

{% highlight html %}
  {% include folder-example/file-example %}
{% endhighlight %}

/pattern (web page)

{% include folder-example/file-example %}

Obviously the plugin is doing its job, but is there a way the plugin could render out the templating language that is being used, instead of literally displaying what is written (easier to say than to actually do it)?

Or would you recommend creating a custom filter to render whatever has been written?

Many thanks 👍

[jordanthornquest]

Hey Ben,

I think you can use the Nunjucks Paired Shortcode version of the highlight shortcode. Paired shortcodes let you nest template content inside of shortcodes, and would render output as you're expecting. Understandably, this would mean using Nunjucks instead of Liquid, which makes migrating from Jekyll a bit more of a pain.

However, it looks like the Nunjucks Paired Shortcode is being loaded using the universal Paired Shortcode syntax, meaning it should work inside Liquid templates, too. I'm not sure how to explicitly use the "Paired Shortcode" version instead of the "Liquid Shortcode" version, unfortunately.

[benbrehaut]

Hey @jordanthornquest

Thanks for the tip!

While migrating the project to Nunjucks is something to work on in the future (the project has a lot of files and the focus is moving off Jekyll), your link to the Paired shortcodes did help!

For future reference for anyone, this is what I ended up doing:

eleventy.js (file)

eleventyConfig.addPairedLiquidShortcode('showCode', function (code) {
 const html = ...formatting code

  return `${html}`;
});

_code.liquid (file)

{% showCode %}
  {% include folder-example/file-example %}
{% endshowCode %}

/pattern (web page)

<div class="pattern-example">
  <p>Hello, I am a pattern</p>
</div>

[rijkvanzanten]

@benbrehaut am I right in understanding that your final solution was not using this syntax highlighting plugin in the first place?

[benbrehaut]

Hey @rijkvanzanten, so sorry for the late reply!

You are correct, in the end, we just used Prism.js and passed in the file contents to it, and it returned the formatted code.

Attached example

.eleventy.js

const Prism = require('prismjs');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPairedLiquidShortcode('showCode', function (content) {
        prismloadLanguages(['html'])
        const html = Prism.highlight(content, Prism.languages.html, 'html');

        return `<figure class="highlight"><pre><code class="language-html">${html}</code></pre></figure>`;
    });
}