如何在 Svelte 组件中运行 Prismjs？

Question

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

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

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

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

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

Answer 1

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

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

我一开始就应该提到，我正在使用 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)
    )

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

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

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

如何在 Svelte 组件中运行 Prismjs？

问题描述

1 个解决方案

解决方案1
1 2019-11-07 17:58:23

如何在 Svelte 组件中运行 Prismjs？

问题描述

1 个解决方案

解决方案1 1 2019-11-07 17:58:23

解决方案1
1 2019-11-07 17:58:23