如何使用Lit Element渲染转义字符串？

你遇到的核心问题是模板引擎默认会对插值的字符串进行HTML转义，导致高亮后的HTML字符串被转义成文本内容，无法被浏览器解析为HTML结构。

要实现将高亮字符串作为HTML渲染，需使用模板引擎提供的原始HTML插入指令（以你使用的Lit类框架为例，对应unsafeHTML），具体步骤如下：

1. 先导入unsafeHTML指令：

import { unsafeHTML } from 'lit/directives/unsafe-html.js';

2. 修改render方法的插值逻辑，用unsafeHTML()包裹this._code：

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

修改后，模板引擎会将this._code中的内容当作原始HTML插入DOM，浏览器就能正常解析高亮后的<span>标签及内部内容，呈现出预期的高亮效果。

注意：使用unsafeHTML时要确保this._code的内容来源可信，避免引入XSS安全风险。

内容的提问来源于stack exchange，提问作者Ole