在 Prism.js 中导航到第二页后未创建工具栏

Question

我在 PrismJS 中使用“工具栏”和“复制到剪贴板”插件来显示代码片段和工具栏按钮以将代码复制到剪贴板，并加载我的 Prism js 和 css 文件我的 <head>.

如果我直接启动页面（例如：http://localhost:3000/demo/example），PrismJS 会按预期工作。

但是，如果我离开该页面并 return 转到该页面，或者从主页 (http://localhost:3000/) 开始并导航到包含代码片段的页面，则该按钮不会出现。

当我检查代码时，我发现通常包含复制按钮的 <div class="toolbar"> 不见了。

我尝试通过插件加载带有插件的 PrismJS 文件，然后将文件添加到 nuxt.config.js 中，这样根本无法显示“复制”按钮。

为什么会这样？

Answer 1

查看后 this blog 我意识到我需要像这样“突出显示”已安装生命周期中的所有棱镜代码块：

...
    import Prism from "~/plugins/prism";

    export default {
        mounted() {
            Prism.highlightAll();
        },
...

我没有像文章中那样使用 prism npm 包，我只是从 PrismJS 主页下载它并将它和样式包含在我的 nuxt.config.js.

Toolbar not created after navigating to second page in Prism.js