Vue中使用highlight.js实现代码高亮显示以及点击复制

yarn add highlight.js 

import hl from 'highlight.js' // 导入代码高亮文件 import 'highlight.js/styles/a11y-dark.css' // 导入代码高亮样式 // 自定义一个代码高亮指令 Vue.directive('highlight', function (el) { const blocks = el.querySelectorAll('pre code') blocks.forEach((block) => { hl.highlightBlock(block) }) })

  export default { data () { return { code: `` } } }

import Vue from 'vue' import Clipboard from 'clipboard' function clipboardSuccess () { Vue.prototype.$message.success({ content: '复制成功', duration: 1.5 }) } function clipboardError () { Vue.prototype.$message.error({ content: '复制失败', duration: 1.5 }) } export default function handleClipboard (text, event) { const clipboard = new Clipboard(event.target, { text: () => text }) clipboard.on('success', () => { clipboardSuccess() clipboard.destroy() }) clipboard.on('error', () => { clipboardError() clipboard.destroy() }) clipboard.onClick(event) }