如何用highlight.js和clipboard.js实现代码块高亮及复制功能？

本文共计949个文字，预计阅读时间需要4分钟。

主要从两方面入手：1. 高亮显示/换行；2. 复制代码按钮。这两方面都有现成的插件。

代码高亮插件——highlight.js：

1.下载highlight的js文件。

网址：https://highlightjs.org/ 点击get version进入下载页面。

主要从两个方面入手了：

1.高亮显示/换行

2.复制代码按钮

这两方面都有现成的插件。

代码高亮插件——highlight.js

1.下载highlight的js文件。

highlightjs.org/

点击get version按钮进入语言选择

勾选常用语言，通常common就足够用了。

点击download，下载，解压，里面会有js文件和css文件。

js文件决定哪些部分高亮，css决定代码颜色

2.在解压后的文件里找到一个highlight.pack.js文件，在使用时导入这个js文件。

<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>

3.打开里面的styles文件，里面有很多的css文件。这些文件可以更改你的展示代码的css样式，包括高亮的颜色和背景色(主题色)。

在使用时想使用那种样式只需要导入这个样式的css文件即可。