如何在 Svelte 组件中运行 Prismjs？答案

【问题标题】：How do I run Prismjs in a Svelte component?如何在 Svelte 组件中运行 Prismjs？
【发布时间】：2020-03-03 15:19:06
【问题描述】：

我只是想在我的 Svelte 项目中实现 Prismjs。

我正在将 CSS 加载到我的 <head> 中，并将 JS 导入到我的 Svelte 组件中。

我遇到了这里描述的类似问题：https://medium.com/get-it-working/get-prismjs-working-in-react-a6d989e59290

基本上，我似乎需要在组件渲染后重新运行脚本。我试图通过在 onMount 生命周期内运行 Prism.highlightAll() 以与文章中 React 中所述相同的方式完成此操作。

我希望这种方法能奏效，但我一事无成。我仍然需要刷新页面才能看到样式生效。我在这里错过了什么？

【问题讨论】：

你能把复制品放在一起吗？

标签： javascript svelte prismjs

【解决方案1】：

tldr;这不是 Svelte 问题。这是我的 Sanity 的 blocks-to-html 实用程序的序列化程序的问题。

嗨@RichHarris！在将一个 repo 放在一起进行复制时，我发现 prism 按预期工作。然后我能够缩小我的问题范围。

我一开始就应该提到，我正在使用 Sapper 并从 Sanity 中提取内容。我对 Sanity 的 block-content-to-html 实用程序的序列化程序进行了修改，该实用程序将我的可移植文本转换为标记。 <pre> 标签从 Sanity 获得 data-language='HTML'，而 Prism CSS 期待 class="language-HTML。我将序列化程序修改为：

code: ({node}) => 
    h(
        "pre", 
        {
            "data-language": node.language, "class": "language-" + node.language
        }, 
        h("code", {}, node.code)
    )

刷新后有效。类属性被添加，并应用了 CSS。我只是在翻阅代码，因为我真的不知道blocksToHtml 是如何工作的，但是将对象属性更改为className 后，一切都按预期工作：

code: ({node}) => 
    h(
        "pre", 
        {
            "data-language": node.language, className: "language-" + node.language
        }, 
        h("code", {}, node.code)
    )

感谢您的观看，Rich！我真的很喜欢 Svelte！

【讨论】：