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>

转载请注明出处@https://www.cnblogs.com/noah227/p/18573910