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

Question

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

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

但是，如果我离开页面并返回到该页面，或者从主页 (http://localhost:3000/) 开始并导航到带有代码片段的页面，则按钮不会显示。

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

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

为什么会发生这种情况？

score 0 · Accepted Answer

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

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

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

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

1 回答 1