用点亮元素渲染转义字符串？

Question

此演示首先突出显示

fs-highlight

元素中包含的 html，并将结果分配给

_code

属性。

render

方法然后渲染模板，其中

_code

突出显示的html插入到

code

元素中，如下所示：

  render() {
    if (this.language) {
      return html`
    <h1>Hello</h1>
    <pre><code class="language-${this.language}">${this._code}</code></pre>
    `;
    }
    return html`
    <h1>Hello</h1>
    <pre><code>${this._code}</code></pre>
    `;
  }

我预计会看到

<test></test>

。然而它呈现为：

<span class="hljs-section">&lt;test&gt;</span><span class="hljs-section">&lt;/test&gt;</span>

这是因为结果周围有引号，如下所示（在开发人员工具中查看）：

"<span class="hljs-section"><test></span><span class="hljs-section"></test></span>"

我们如何让它渲染以便浏览器将高亮字符串转换为 html？

Answer 1

您可以使用

unsafeHTML

指令将字符串呈现为 HTML：

import {unsafeHTML} from 'lit/directives/unsafe-html.js';
...
<code>${unsafeHTML(this._code)}</code>

或者您可以使用浏览器原生的

innerHTML

属性：

<code .innerHTML="${this._code}"></code>