prismjs Copy to Clipboard Button 使用问题/注意事项
Copy to Clipboard Button 属于插件内容,其依赖于toolbar
问题1:复制按钮不加载
在How to use中所述内容值得注意:
The plugin depends on the Prism Toolbar plugin. In addition to including the plugin file with your PrismJS build, ensure it is loaded before the plugin.
也就是说,插件加载的时机非常重要,要先加载prism本身基础的内容,然后再加载插件。
这一点,在教程页面的源码中也能看到:
相关截图

问题2:按钮加载,但是显示样式很奇怪
比如说,我这里使用了prism-coy主题,它上方出现了奇妙的空白占用空间:
虽然当我把它切到其他主题(比如prism-funky)时,那个空间占用没了,但发现,首行缩进出了问题:
那么,其中本身,显然是有什么问题的。。。
想了想,把代码code标签和pre标签中的换行给去掉了,然后它就正常了。
coy主题处理太到位了,我都没注意到这个问题🤣
原来的(渲染有问题):
<pre class="json-highlight">
<code ref="refCode" class="language-json" data-prismjs-copy="复制"></code>
</pre>
修改后(渲染正常):
<pre class="json-highlight"><code ref="refCode" class="language-json" data-prismjs-copy="复制"></code></pre>