11ty Pass template data to a syntax highlighted tag

So, I've got a template that brings data from a collection, this specific collection has info about some fonts, and I need to output a block of syntax highlighted code, this code references how the font should be added using @fontface for example:

           {% highlight css %}
            @font-face 
                font-family: coolFont;
                src: url(/fonts/coolFont.woff) format("woff"),
              url(fonts/coolFont.ttf) format('truetype');
                  font-weight: normal;
                font-style: normal;
                font-display: swap;
            }
            {% endhighlight %}

I'm looking to pass the font name from the post front matter and have it output with the loop for every one, however, since it renders as <code> it outputs my liquid tags, instead of the front matter data.

            {% highlight css %}
            @font-face 
                font-family: {{ post.data.fontName }};
                src: url(/fonts/{{post.data.fontName}}.woff) format("woff"),
              url(fonts/{{post.data.fontName}}.ttf) format('truetype');
                  font-weight: normal;
                font-style: normal;
                font-display: swap;
            }
            {% endhighlight %}

Is there a way to "escape" the brackets??

You may be interested in this issue from the eleventy-plugin-syntaxhighlight Github repo.

Essentially, Liquid templating inside the {% highlight %} tags don't work, but you can work around it by either switching to Nunjucks templating (where templating will work inside the block) or by defining a custom paired shortcode where you use Prism or your highlighter of choice directly.