vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能

2023-10-11 16:59
文章标签 代码 实现 显示 功能 vue3 复制 高亮 highlight

本文主要是介绍vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在vscode中，有代码高亮的功能。那么如果在前端项目中，展示代码时如何实现高亮效果。

这是我们可以使用highlight.js，highlight.js是一款基于JavaScript的语法高亮库，它具有以下功能：
在这里插入图片描述
备注：关于复制的方法execCommand已经废弃了，我懒得改了，替代方式见：前端复制、剪切、禁止复制等

highlight官网

使用

安装

## 这个是highlight.js基础依赖
npm install --save highlight.js
## 安装支持vue3 的@highlightjs/vue-plugin 依赖
npm install --save @highlightjs/vue-plugin

main.js引入

// highlight 的样式，依赖包，组件
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'//注册组件
app.use(hljsVuePlugin)

使用

<template><div><highlightjs language="JavaScript" :autodetect="false" :code="code"></highlightjs></div>
</template><script setup lang="ts">
let code = 'import { createApp } from "vue";import App from "./App.vue";'</script><style scoped lang="scss">
</style>

注意：

  • 因为插件不支持响应式数据，所以不要使用ref定义响应式变量
  • autodetect 将自动匹配设置为false，自动匹配一般不准

比较常用的语言有：HTML、XML、C++、CSS、Java、JavaScript、PHP、Python、SCSS、SQL、TypeScript其他语言可以自行查看官方文档

效果
在这里插入图片描述

修改样式

更换主题

现在我们使用的主题是：

import 'highlight.js/styles/atom-one-dark.css'

在这里插入图片描述
可以根据官方demo，找到一个自己喜欢的主题。然后引入就好，如何引用呢？找到highlight.js/styles文件夹，引入对应的样式即可，我这里用的这个androidstudio，感觉不错

import 'highlight.js/styles/androidstudio.css'

自定义样式

到目前为止，还是不太好看，我想要的是这样的
在这里插入图片描述
这里可以自己写一些样式来实现

<template><div class="hljs-container" codetype="JavaScript"><highlightjs language="JavaScript" :autodetect="false" :code="code"></highlightjs></div>
</template><script setup lang="ts">
let code = `let a = 1;import hljs-containerVuePlugin from '@highlightjs/vue-plugin';import hljs-containerVuePlugin from '@highlightjs/vue-plugin';
import hljs-containerVuePlugin from '@highlightjs/vue-plugin';
import hljs-containerVuePlugin from '@highlightjs/vue-plugin';`;
</script><style scoped lang="scss">
/* 语法高亮 */
.hljs-container {position: relative;display: block;width: 600px;padding: 30px 5px 2px;overflow-x: hidden;line-height: 20px;text-align: left;background: #21252b;box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}/** 3个点 */
.hljs-container::before {position: absolute;top: 10px;left: 15px;width: 12px;height: 12px;overflow: visible;font-weight: 700;font-size: 16px;line-height: 12px;white-space: nowrap;text-indent: 75px;background-color: #fc625d;border-radius: 16px;box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;content: attr(codetype);
}/** 滚动条 */
:deep(.hljs) {overflow-x: auto;
}:deep(.hljs::-webkit-scrollbar) {width: 12px !important;height: 12px !important;
}:deep(.hljs::-webkit-scrollbar-thumb) {height: 30px !important;background: #d1d8e6;background-clip: content-box;border: 2px solid transparent;border-radius: 19px;opacity: 0.8;
}:deep(.hljs::-webkit-scrollbar-thumb:hover) {background: #a5b3cf;background-clip: content-box;border: 2px solid transparent;
}:deep(.hljs::-webkit-scrollbar-track-piece) {width: 30px;height: 30px;background: #333;
}::-webkit-scrollbar-button {display: none;
}
</style>

在这里插入图片描述

功能

需要添加 代码行数 和 点击复制的功能

效果

在这里插入图片描述

完整代码

组件

<template><div class="hljs-container" codetype="JavaScript" v-code><highlightjs language="JavaScript" :autodetect="false" :code="code"></highlightjs></div>
</template><script setup lang="ts">
import vCode from './line';
let code = `let a = 1;
import hljs-containerVuePlugin from '@highlightjs/vue-plugin';
import hljs-containerVuePlugin from '@highlightjs/vue-plugin';
<div class="hljs-container" codetype="JavaScript" v-code><highlightjs language="JavaScript" :autodetect="false" :code="code"></highlightjs>
</div>`;
</script><style scoped lang="scss">
@import "./code.scss";
</style>

指令

import './code.scss';
const vCode = {mounted(el: any) {//获取代码片段let code = el.querySelector('code.hljs')let pre = document.getElementsByTagName('pre')[0]let html = code?.innerHTMLlet size = html.split('\n').length//插入行数let ul = document.createElement('ul')for (let i = 1; i <= size; i++) {let li = document.createElement('li')li.innerText = i + ''ul.appendChild(li)}ul.classList.add('hljs-code-number')el.insertBefore(ul, pre)//插入复制功能let copy = document.createElement('div')copy.classList.add('hljs-copy')copy.innerText = '复制'//添加点击事件copy.addEventListener('click', () => {//创建一个输入框let textarea = document.createElement('textarea')document.body.appendChild(textarea);textarea.setAttribute('readonly', 'readonly')textarea.value = code.innerText;textarea.select();if (document.execCommand('copy')) {document.execCommand('copy');copy.innerText = '复制成功'}document.body.removeChild(textarea);})pre.appendChild(copy)//鼠标移入显示复制按钮el.addEventListener('mouseout', () => {copy.innerText = '复制'copy.style.display = "none"})el.addEventListener('mouseover', () => {copy.style.display = "block"})}
}export default vCode

样式

/* 语法高亮 */
.hljs-container {position: relative;display: block;display: flex;width: max-content;margin-left: 100px;padding: 30px 10px 2px 0;overflow-x: hidden;font-size: 14px;line-height: 24px;text-align: left;background: #21252b;box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}/** 3个点 */
.hljs-container::before {position: absolute;top: 10px;left: 15px;width: 12px;height: 12px;overflow: visible;font-weight: 700;font-size: 16px;line-height: 12px;white-space: nowrap;text-indent: 75px;background-color: #fc625d;border-radius: 16px;box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;content: attr(codetype);
}/** 滚动条 */
:deep(.hljs) {overflow-x: auto;
}:deep(.hljs::-webkit-scrollbar) {width: 12px !important;height: 12px !important;
}:deep(.hljs::-webkit-scrollbar-thumb) {height: 30px !important;background: #d1d8e6;background-clip: content-box;border: 2px solid transparent;border-radius: 19px;opacity: 0.8;
}:deep(.hljs::-webkit-scrollbar-thumb:hover) {background: #a5b3cf;background-clip: content-box;border: 2px solid transparent;
}:deep(.hljs::-webkit-scrollbar-track-piece) {width: 30px;height: 30px;background: #333;
}::-webkit-scrollbar-button {display: none;
}/** 行数样式 */
.hljs-code-number {padding: 17px 10px 0;color: #d1d8e6;font-size: 12px;list-style: none;border-right: 1px solid #d1d8e6;
}/** 复制样式 */
.hljs-copy {position: absolute;top: 50px;right: 30px;display: none;padding: 0 10px;color: #66a9ff;font-size: 10px;background-color: #ecf5ff;border-radius: 3px;cursor: pointer;
}

这篇关于vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/189503。

相关文章

Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
关于集合与数组转换实现方法

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》：本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方
阅读更多...
使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
java实现docker镜像上传到harbor仓库的方式

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》：本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2
阅读更多...
C++20管道运算符的实现示例

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多，因为它实际属于c++20最为重要的
阅读更多...
Java easyExcel实现导入多sheet的Excel

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码
阅读更多...
Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2