我正在使用PrismJS的“工具栏”和“复制到剪贴板”插件来显示代码片段和工具栏按钮,以将代码复制到剪贴板,并在<head>
中加载我的Prism js和css文件。
如果我直接启动到页面,PrismJS将按预期工作(例如:)。
但是,如果我离开该页面并返回到该页面,或者从主页(http://localhost:3000/)开始并导航到包含代码段的页面,则按钮不会显示。
当我检查代码时,我可以看到通常包含Copy按钮的<div class="toolbar">
丢失了。
我尝试通过插件加载带有插件的PrismJS文件,并将该文件添加到nuxt.config.js中,这完全阻止了复制按钮的显示。
为什么会发生这种情况?
2条答案
按热度按时间pcww981p1#
checkout this blog后,我意识到需要“突出显示”Mounted生命周期中的所有prism代码块,如下所示:
我没有像文章中那样使用prism npm包,我只是从PrismJS主页下载了它,并将它和样式包含在我的nuxt.config.js中。
ulmd4ohb2#
对于React用户,你可以使用reactuseEffecthook来实现,类似于: