使用webcomponent内的prismjs显示带有语法突出显示的代码段

问题描述

我正在尝试使用Prismjs展示语法摘要。

有关该项目的一些信息：

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

这是商店中的代码段外观（只是一个字符串）：

然后在组件内部，我可以将其呈现为字符串而不会出现问题，但是我似乎无法使语法高亮显示正常工作。

我要导入样式，并且也要在组件顶部导入棱镜js，如下所示： 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从此获取器获取值：

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

在第一个上，我在代码块上看到了正确的代码段，但是没有显示棱镜。在第二篇文章中，我看到Prism添加了需要突出显示代码的类，但随后将其呈现为字符串（带有通过棱镜添加的新标记）。

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

解决方法

在写了这个问题的片刻之后，我想起了一些东西，这使我得以解决这个问题。

我是在这里写的，以防有人遇到同样的问题。

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>