代码高亮

下载插件

首先下载highlight.js插件，可在本文页尾免费下载，或自行百度下载。

引用插件

将下载的压缩包解压，引用css和js（本文提供的附件中 monokai-sublime.css，是 sublime 编辑器的一种常用样式，自行下载的插件包 styles 文件夹有很多不同的样式库，也可以自己挑个自己喜欢的用）

<link rel="stylesheet" type="text/css" href="你的路径/monokai-sublime.css">
<script type="text/javascript" src="实际路径/highlight.pack.js">script>
<script>hljs.initHighlightingOnLoad();script>

添加代码

highlight.js 代码高亮遵循的格式是：

**

**

<script type="text/javascript">
    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i][xss_clean];
        onepre[xss_clean] = ''+mycode+'';
    }
script>

至此，基本的代码高亮显示效果就制作完成了，如果还想在代码框中增加一键复制功能，可继续按照以下教程开发。

一键复制

下载插件

首先下载clipboard.js插件，可在本文页尾免费下载，或自行百度下载。

引用插件

将下载的压缩包解压，引用js

<script src="实际路径/clipboard.min.js">script>

添加代码

将代码高亮那一步中添加的代码，循环插入 的代码改为以下代码（在 code 层前面增加了一个 button）

<script type="text/javascript">
    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i][xss_clean];
        onepre[xss_clean] = 'COPY'+mycode+'';  //在 code 层前面增加了一个 button
    }
script>

为 pre 循环增加 id，并为 pre 内的 button 增加 data-clipboard-target 属性

<script>
  $("pre").each(function(){
   $(this).attr('id',"pre"+$(this).index());
    var btns = $(this).find("button");
     $(btns).attr('data-clipboard-target',"#pre"+$(this).index())
});
script>

添加官方demo中的复制代码

<script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
script>

复制按钮的css样式，添加到你的css文件中

pre {
position: relative; 
}
pre .btn{ 
display: none;
position: absolute;
top:0;
right: 0;
background: #333;
color: #9c9c9c;
border: 1px solid #232323;
}
pre .btn:hover{ 
color: #fff
}
pre:hover .btn{
display: block;
}

至此，代码高亮加一键复制功能就全部完成了。