11ty 将模板数据传递给语法高亮标记

Question

所以，我有一个从集合中提取数据的模板，这个特定的集合有一些字体的信息，我需要输出一段语法高亮代码，这段代码参考了如何添加字体使用 @fontface 例如：

           {% 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 %}

我希望从 post 前面的内容中传递字体名称，并通过循环为每个字体输出它，但是，由于它呈现为 <code> 它输出我的液体标签, 而不是前题数据。

            {% 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 %}

有没有办法“转义”括号？

Answer 1

您可能对 eleventy-plugin-syntaxhighlight Github 存储库中的 this issue 感兴趣。

基本上，{% highlight %} 标签内的 Liquid 模板不起作用，但您可以通过切换到 Nunjucks 模板（模板将在块内工作）或通过定义 custom paired shortcode 直接使用 Prism 或您选择的荧光笔。

11ty 将模板数据传递给语法高亮标记

11ty Pass template data to a syntax highlighted tag

prismjs

eleventy