vue.js 导航至Prism.js中的第二页后未创建工具栏

ffscu2ro  于 2023-01-17  发布在  Vue.js
关注(0)|答案(2)|浏览(127)

我正在使用PrismJS的“工具栏”和“复制到剪贴板”插件来显示代码片段和工具栏按钮,以将代码复制到剪贴板,并在<head>中加载我的Prism js和css文件。
如果我直接启动到页面,PrismJS将按预期工作(例如:)。
但是,如果我离开该页面并返回到该页面,或者从主页(http://localhost:3000/)开始并导航到包含代码段的页面,则按钮不会显示。
当我检查代码时,我可以看到通常包含Copy按钮的<div class="toolbar">丢失了。
我尝试通过插件加载带有插件的PrismJS文件,并将该文件添加到nuxt.config.js中,这完全阻止了复制按钮的显示。
为什么会发生这种情况?

pcww981p

pcww981p1#

checkout this blog后,我意识到需要“突出显示”Mounted生命周期中的所有prism代码块,如下所示:

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

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

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

ulmd4ohb

ulmd4ohb2#

对于React用户,你可以使用reactuseEffecthook来实现,类似于:

useEffect(() => {
    const highlight = () => {
      Prism.highlightAll();
    };
    highlight();
  }, []);

相关问题