0

我正在尝试使用 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 添加的新标记）。

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

4

1 回答 1

0

写完这个问题后不久，我想起了一些事情，这让我能够解决这个问题。

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

lit-html 有一个unsafeHTML指令（这里是文档），它允许我们呈现为 HTML 而不是字符串。当然，这应该小心使用，因为它可能导致安全问题。

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

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

然后像这样渲染代码块：

<code class="stage__code language-css" id="codeContainer">
   ${unsafeHTML(this._highlightedCode)}
</code>
于 2020-10-03T09:54:10.840 回答