在 webcomponent 中使用 prismjs 显示带有语法高亮显示的代码片段

Question

我正在尝试使用 Prismjs 显示代码片段以进行语法突出显示。

项目的一些信息：

我正在使用 lit-element 并且我有一个代码片段保存为一个字符串，我想在页面上显示它并带有一些漂亮的语法突出显示（为此使用 prismjs）。

这是该代码段在商店中的样子（只是一个字符串）：

然后在组件内部我可以毫无问题地将其呈现为字符串，但我似乎无法使语法突出显示工作。

我正在导入样式，并且还在组件顶部导入 prismjs，如下所示： import Prism from 'prismjs';

为了测试，我以两种不同的方式呈现代码段：第一种是保存在商店中，第二种是使用 prism.highlight() 函数。

这是它们在前端的样子：

这就是我在我的组件中呈现它们的方式：

<pre>
   <code class="stage__code language-css">${this._selectedSnippet.code}</code>
   <code class="stage__code language-css">${this._highlightedCode}</code>
</pre>

this._selectedSnippet.code 获取保存在商店中的值。

this._highlightedCode 从这个 getter 得到值:

get _highlightedCode() {
   return Prism.highlight(this._selectedSnippet.code, Prism.languages.css, 'css')
}

在第一个上，我在代码块上看到了正确的片段，但 Prism 没有突出显示它。在第二个上，我看到 Prism 添加了类它需要突出显示代码，但它随后呈现为字符串（由 prism 添加了新标记）。

关于如何解决这个问题的任何想法？谢谢！

Answer 1

刚写完这个问题我就想起了什么，这让我解决了这个问题。

我写在这里，以防其他人有同样的问题。

lit-html 有一个 unsafeHTML 指令（here the documentation），它允许我们呈现为 HTML 而不是字符串。当然这个要小心使用，因为它会导致安全问题

所以我最终像这样导入了这个指令：

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

然后像这样渲染代码块：

<code class="stage__code language-css" id="codeContainer">
   ${unsafeHTML(this._highlightedCode)}
</code>

在 webcomponent 中使用 prismjs 显示带有语法高亮显示的代码片段

Show code snippet with syntax highlighting using prismjs inside webcomponent

html

javascript

syntax-highlighting

prismjs

lit-element