如何将一个过滤器标记为安全？

Question

我想用以下方法为nunjucks设置一个语法高亮过滤器 突出显示.js. 这似乎很容易做到。 在我的 elevnety.js文件中，我包含了。

    const hljs = require('highlight.js');
    eleventyConfig.addFilter('highlight', function(txt) {
        return hljs.highlightAuto(txt).value;
    });

看起来highlight.js是一个安全的过滤器，它会正确地转义它的内容，并添加标记来控制高亮，所以没有其他事情可做。

在我的njk页面中，我试着将其与

{% filter highlight %}
  <xmlstuff>
    <myelements attr1="foo" />
  </xmlsfuff>
{% endfilter %}

高亮标记被正确生成，但整个结果被转义（也许是被nunjucks），所以结果页面渲染了所有标记代码。 以下是被添加到输出html页面的内容。

  <span class="hljs-tag"><<span class="hljs-name">xmlstuff</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">myelements</span> <span class="hljs-attr">attr1</span>=<span class="hljs-string">"foo"</span> /></span>
  <span class="hljs-tag"></<span class="hljs-name">xmlsfuff</span>></span>

我知道nunjucks有一个安全过滤器来防止这种情况发生，但我不知道如何应用它来说明我的过滤器块不需要转义，我在文档中找不到任何东西。 我尝试了很多方法，但都失败了。

{% filter highlight | safe %}
  <xmlstuff>
    <myelements attr1="foo" />
  </xmlsfuff>
{% endfilter %}

{% filter highlight %}
  <xmlstuff>
    <myelements attr1="foo" />
  </xmlsfuff>
{% endfilter | safe %}

{{ {% filter highlight %}
  <xmlstuff>
    <myelements attr1="foo" />
  </xmlsfuff>
{% endfilter %} | safe }}

有什么方法可以把这个过滤块标记为安全的吗？

Answer 1

尝试应用 env.filters.safe 输出前。

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();    

env.addFilter('safeFilter', str => env.filters.safe(str));
env.addFilter('unsafeFilter', str => str);

var html = env.renderString(
    `{{ str | safeFilter }}\n{{ str | unsafeFilter }}`, 
    {str: '<h1>Hello</h1>'}
);

console.log(html);

Answer 2

@aikon-mogwai发布了正确答案。 然而对于十一号来说，需要的东西更多一些，因为需要在十一号文件中设置过滤器，而且我们需要获得nunjucks环境的访问权限。 我把我的完整解决方案加在这里，供大家参考。

我看eleventy并没有提供对nunjucks环境的访问权限，所以我们需要创建一个环境，并将其设置为覆盖现有环境。 之后就和他说的差不多了。

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy('src/images')

    /*
     * Create and register a Nunjucks environment, just so we
     * can get access to the safe filter.
     */
    let Nunjucks = require("nunjucks");
    let nunjucksEnvironment = new Nunjucks.Environment(
      new Nunjucks.FileSystemLoader("src/_includes"), { }
    );
    eleventyConfig.setLibrary("njk", nunjucksEnvironment);

    /*
     * Set up a syntax highlighting filter for code blocks
     */
    const hljs = require('highlight.js');
    eleventyConfig.addNunjucksFilter('highlight', function(txt, lang) {
        var txt2;
        if (lang == undefined)
            txt2 = hljs.highlightAuto(txt).value;
        else
            txt2 = hljs.highlight(lang, txt).value;
        return nunjucksEnvironment.filters.safe(txt2);
    });

  return {
    dir: { input: 'src', output: 'dist', data: '_data' },
    passthroughFileCopy: true,
    templateFormats: ['njk', 'md', 'css', 'html', 'yml'],
    htmlTemplateEngine: 'njk'
  }
}