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)插图 highlight.js增加复制按钮(clipboard.js)插图1
加入clipboard.js实现复制:

highlight.js增加复制按钮(clipboard.js)插图2 highlight.js增加复制按钮(clipboard.js)插图3
带有复制功能的代码高亮html结构:
highlight.js增加复制按钮(clipboard.js)插图4 highlight.js增加复制按钮(clipboard.js)插图5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注