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

【问题标题】：Toolbar not created after navigating to second page in Prism.js导航到 Prism.js 中的第二页后未创建工具栏
【发布时间】：2020-10-28 00:04:49
【问题描述】：

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

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

但是，如果我离开该页面并返回该页面，或者从主页 (http://localhost:3000/) 开始并使用代码 sn-p 导航到该页面，则按钮不会显示。

当我检查代码时，我可以看到通常包含“复制”按钮的 <div class="toolbar"> 丢失了。

我尝试通过插件加载带有插件的 PrismJS 文件并将该文件添加到 nuxt.config.js 中，这完全阻止了“复制”按钮的显示。

为什么会发生这种情况？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：