如何解决使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。