1

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

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

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

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

我希望这种方法能奏效，但我一无所获。我仍然需要刷新页面才能看到样式生效。我在这里想念什么？

4

1 回答 1

1

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

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

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

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

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

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

谢谢你看，里奇！我真的很喜欢 Svelte！

于 2019-11-07T17:58:23.267 回答