highlight.js增加复制按钮(clipboard.js)

highlight.js是常用的代码高亮js库,如果要增加复制按钮怎么实现呢?clipboard.js来实现:

首先看一下highlight.js生成的HTML结构:

代码高亮源码:

import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
hljs.initHighlightingOnLoad()

生成的html:

highlight.js
加入clipboard.js实现复制:

代码高亮复制
带有复制功能的代码高亮html结构:
代码高亮复制

发表回复