网站引入 Prism，使得代码高亮显示，并一键复制代码块

曾几何时，苦恼如何将本地写好的博文，更好的展示读者屏幕前？若只是简简单单的文章，其实还是很好的解决它的！可是，像我们这样写技术文章（有点牵强）的，在文章内容嵌入部分代码是在所难免的。

然而，由于没能将代码与文本区分开来，致使两者混在一起，分不出彼此。由此给读者带来了视觉上得不适，它并没有很好的像代码编辑器那样高亮。

下载 Prism

虽然市面上能让代码块高亮显示，远不止Prism这一款，而我又为什么选择这一款呢？这的确是个好问题，然而我只能回答您的是，它功能比较强大吧！（或许您还不能信服），这就好比是情人眼里出西施，您的老婆/老公或女朋友/男朋友长得不是那么美/那么帅（或许您在某一瞬间也是这么觉得），但是，您不还是选择了她/他吗？即便是，您和伴侣在逛街时，迎面走来一位身材高挑的美女/帅哥，想必您的伴侣是在您不经意间，偷瞄了一眼。

进入prism官网下载：

https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript

随后，我们在项目中引入Prism.css样式文件。

<link href="themes/prism.css" rel="stylesheet" />

以及Prism.js文件。

<script src="prism.js"></script>

当然咯，您的代码块是需要使用<pre>和<code class="language-*"标签。

<pre><code class="language-html">
<link href="themes/prism.css" rel="stylesheet" />
</code></pre>

添加 clipboard 复制代码按钮

若是有一点按钮就可以复制这段代码，想必应该是没有人会再去用鼠标去滑动选择代码，然后右键，选择复制选项，或者直接按住键盘上的Ctrl + C。

首先，想要在项目中添加clipboard功能，那么，就显得下载它，这是毋庸置疑的！

当然，我们还是到Prism官网下载它，

在项目中引入：

<script src="plugins/clipboard.js"></script>

Hugo-theme-kiwi 中引入 Prism

首先，我们在Hugo-theme-kiwi主题的head.html文件引入blackmac.css样式文件。

<link rel="stylesheet" href="{
    { .Site.BaseURL }}css/blackmac.css">

blackmac.css文件内容如下：

code[class*="language-"],pre[class*="language-"]{
   color:#f8f8f2;background:#313238;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal