Provide a | highlight filter as well?

[mirisuzanne]

The paired shortcode is great when I know that an entire block rendered in my template will be code - but sometimes I'm rendering arbitrary markdown that might have code blocks nested inside. In that case, I'd love to do something like:

{{ data | markdown | highlight | safe }}

For now, I'll try importing prism as a stand-alone in addition to eleventy-plugin-syntaxhighlight - and use it to generate a custom filter (or tag along on my markdown filter).

[schneyra]

I'd love this, too. I'm using a CMS as source for my blogposts and it delivers pre-rendered HTML where code is embedded.

<pre class="language-css"><code>[...]</code><pre>

I hope I haven't overlooked anything, but I'd like to do something like {{ article.content | highlight | safe }}.

[jinsupark]

Just ran into this problem! This would be super helpful indeed.

[zachleat]

You can DIY this with something like:

const { pairedShortcode } = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter("highlight", function(content, language) {
    return pairedShortcode(content, language);
  });
};

[mirisuzanne]

@zachleat I don't think that quite solves the initial issue here - which is that only some of the content might involve fenced code, and only that code should be highlighted. If I understand this right, it would turn the entire content into a code-block instead.

[stillingdesign]

Just wanted to check-in on this and see if anyone has found a good solution? Running into this same problem.

[Snapstromegon]

Even though I didn't take a closer look at this plugin, IMO it should be possible to do this.

I personally switched away to using shiki as a highlighter and wrote a short blogpost on how to do it:
https://www.hoeser.dev/blog/2023-02-07-eleventy-shiki-simple/

The code from the TLDR should be possible to adapt to also allow for a highlight filter too.