下载js文件

阿里云盘链接：https://www.aliyundrive.com/s/LGzQZBYXYGZ

前端引入样式和js文件

引入顺序按下面代码所示，顺序不同可能会得不到我们想要的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--代码高亮样式-->
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/androidstudio.min.css">
<!--行号js文件-->
<script th:src="@{/static/js/highlight.line-numbers.js}"></script>
<!--代码高亮js文件-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<!--代码复制-->
<script th:src="@{/static/js/highlightjs-copy-button.js}"></script>
<script th:src="@{/static/js/highlightjs-copy-button.min.js}"></script>
<!--初始化-->
<script>
	hljs.initHighlightingOnLoad();//代码高亮
	hljsln.initLineNumbersOnLoad();//行号
	hljs.initCopyButtonOnLoad();//代码复制
</script>

修改复制代码按钮大小及其样式

1
2
3
4
5
6
7
8
9
.hljs-button{
    font-size: 11px;
    color: #0b0b0b;
}

.hljs-button:hover{
    color: white;
    background-color: #6eb9f1;
}

结果

img

PS.

来源：https://github.com/DevCreel/highlightjs-copy-button.js