---
title: vue页面使用highlight.js代码高亮和Clipboard代码复制
description: Vue2和Vue3使用highlight.js进行代码高亮，Clipboard进行代码复制有一定差异，主要是this在vue3中不指向组件实例。
author: chaihongjun
category: frontend
published: 2024-12-16
url: https://chaihongjun.me/frontend/38.html
---

# vue页面使用highlight.js代码高亮和Clipboard代码复制

Vue2和Vue3使用highlight.js进行代码高亮，Clipboard进行代码复制有一定差异，主要是this在vue3中不指向组件实例。

假设内容区域代码:
MDBLOCK0
页面的内是通过v-html渲染而来。

首先是安装这两个插件:
MDBLOCK1
然后是引入，不需要全站引入，则在需要使用的页面引入：
MDBLOCK2
后续需要分Vue2和Vue3版本分别处理：
MDBLOCK3MDBLOCK4
这样在代码区域右上角有一个复制按钮，点击复制之后，如果成功则系统剪贴板内有复制的内容，如果复制失败会弹窗和在浏览器控制台报错。而且，复制按钮本身的文字不会被复制。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/38.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。