《Vue3笔记》第43节：Vue3项目中给highlightjs添加行号功能

最新推荐文章于 2025-07-31 19:38:27 发布
最新推荐文章于 2025-07-31 19:38:27 发布
阅读量16 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 【Vue3项目开发】 文章标签： 笔记 vue.js 前端 highlightjs 添加行号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/148815530

前一个小节的内容中，已经介绍了Vue3项目中如何基于highlightjs实现复制代码的功能，这个小节来学习一下，如何基于highlightjs给代码添加行号的功能。

Vue3项目开发（微信文章集合）

1.1、运行效果

这个小节中实现的代码行号功能，运行效果如下图所示：

在这里插入图片描述

1.2、安装依赖

highlightjs中没有直接提供代码行号显示的功能，不过，可以引入第三方库来实现。这里需要安装一个highlightjs-line-numbers.js依赖，这个插件是给highlightjs代码添加行号功能的。

# 安装行号插件
ya
了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第44节：Vue3基于CSS变量实现亮色和暗色主题切换功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
07-30 118
本文介绍了基于CSS变量实现Vue3项目亮色/暗色主题切换的方法。主要思路是：定义两套CSS变量（亮色和暗色主题），通过切换html根元素的data-theme属性来改变变量值；使用localStorage存储当前主题实现持久化。实现步骤包括：1)定义CSS变量；2)创建useTheme.js管理主题状态；3)在组件中使用CSS变量和切换方法。案例展示了通过开关按钮切换主题的效果，颜色和背景会相应变化。该方法简单高效，适用于Vue3项目中的主题切换需求。
Vue.js 笔记
Mr__Zhang___的博客
11-03 480
1 就是四个现代化： ① 模块化（JS 的模块化、CSS 的模块化、资源的模块化） ② 组件化（复用现有的 UI 结构、样式、行为) ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理) ④ 自动化（自动化构建、自动部署、自动化测试) 2 目前主流的前端工程化解决方法： ① webpack
vue中使用highlight.js设置行号
weixin_42604188的博客
01-18 399
在 Vue 中使用 highlight.js 设置行号的方法如下： 安装 highlight.js 和 v-highlight.js Vue 插件：npminstall highlight.js v-highlight.js --save
02-Vue 3 学习笔记 之 Visual Studio Code 工具介绍
fqyy_8829的博客
09-16 208
Visual Studio Code（简称 VS Code 、VSC）是一款免费、开源、跨平台的现代化轻量级代码编辑器，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比、GIT 等特性，并针对网页开发和云端应用开发做了优化。该软件可以跨平台，支持 Windows、Mac 以及 Linux 系统。支持 30 多种常用语言的语法高亮，对htmljscssAngular等有很好的语法支持，并且还支持MarkDown的预览体积小、功能强大、性能好，打开超大型的文本文件也不会卡死。
Vue开发学习笔记:KendoUIGrid实现自动添加序号
JustWantToFly的博客
02-26 587
1.学习自 https://blog.csdn.net/jinuxm/article/details/53169329 https://blog.csdn.net/qwerdfcv/article/details/103479584 2.实现 2.1、首先为KendoUIGrid绑定一个数据绑定事件dataBound <div id="ShowData"> <div class="searchLabel">信息区</div> <div&gt.
vue2.0学习笔记黑马
firewrk的博客
05-28 1458
前置知识 一、WebPack 实际开发中并不需要手动配置webpack 1、概念 webpack是前端项目工程化的具体解决方案 主要功能：提供了友好的前端模块化开发支持、以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大的功能 好处：提高开发效率和项目可维护性 2、创建webpack项目 新建项目空目录需要英文路径，并允许npm init -y 命令，初始化包管理配置文件 package.json 新建src源代码目录 新建src->index.html首页和src
Vue3笔记
nknmn
03-04 852
一.前端工程化 webpack 代码压缩、解决js 的浏览器兼容性问题、性能优化 webpack.config.js文件下： mode 节点： 1.development 开发时用，不代码压缩和性能优化，打包速度块 2.production 发布时用，代码压缩和性能优化，打包速度慢 webpack.config.js文件是webpack 的配置文件，打包...
vue笔记
qq_43670721的博客
12-07 3169
日常工作中汇总的笔记，有ES语法，导入导出、表单表格等组件、项目框架等等，天上飞的，地上跑的，水里游的，应有尽有~比较杂
vue项目获取下拉框选中id_vue获取下拉框值
weixin_39552204的博客
12-18 5713
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解：v-model解决方式：{{item.name}}下拉框的值：index: [{"indexId":1,"name": "点菜用户数"}, {"indexId":2,"name": "点菜新用户数"}, {"indexId":3,"na...
Vue学习笔记-01：前端 webpack 工具安装及配置使用
大大
02-21 431
看懂webpack.config.js中的配置
vue3脚手架如何使用marked库将markdown文件渲染带页面，并使得代码块在高亮的同时具有行号
09-08
1. 在Vue项目中安装marked库，可以使用npm或者yarn进行安装，命令如下： ``` npm install marked ``` 或者 ``` yarn add marked ``` 2. 在Vue组件中引入marked库： ```javascript import marked from &#39;...
Vue笔记（十六）—— Vue PageHelper（SpringBoot）实现后台分页
成长笔记
04-22 1246
前端开发请直接跳到第4歩 1.pom引入依赖： <!--导入pagehelper相关依赖--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version&gt...
JavaWeb（苍穹外卖）--学习笔记14
2301_81189772的博客
07-28 1033
本文总结了JavaWeb开发中Controller层和数据库Mapper层的关键知识点。在Controller层，重点介绍了常用注解：@ResponseBody用于直接返回数据，@RestController组合注解，以及@GetMapping等请求方法注解。同时讲解了三种参数接收方式：简单参数(@RequestParam)、JSON参数(@RequestBody)和路径参数(@PathVariable)。在数据库Mapper层，通过菜品分类、菜品和口味的表结构示例，说明了逻辑外键的使用。最后展示了常见的S
Unity_RPG开发学习笔记
weixin_66484088的博客
07-28 1355
摘要 本教程指导如何在Unity 2021.3中创建3D RPG项目，包含以下核心内容：1)创建项目并安装Universal RP渲染管线提升画面表现；2)从Asset Store导入地图、角色和天空盒素材；3)关键工具操作：光照设置、阴影调整、顶点吸附等快捷键使用；4)安装PolyBrush、ProBuilder等场景构建工具。教程配有详细图文步骤和视频链接，特别说明不同Unity版本在URP材质转换时的差异处理方法。
尚硅谷尚庭公寓学习笔记
最新发布
2301_80165178的博客
07-31 475
本文摘要了Java开发中的几个实用技巧：1）使用@Builder注解实现链式调用创建对象；2）saveOrUpdate方法根据主键自动判断插入或更新数据；3) Minio文件上传的完整实现流程，包括配置、权限设置和服务层逻辑；4）集合判空的最佳实践；5）UpdateWrapper实现条件更新；6）IPage分页查询的使用方法。这些内容涵盖了日常开发中的常见场景，对提高开发效率很有帮助。
C语言笔记03 ：关于指针的补充
chen20100531的博客
07-28 360
int *p[5] 本质上是一个装地址的数组，遵循数组的用法，数据遵循指针的用法，作用将分散的地址连续起来。：没有进行初始化以及为赋值的指针，由编译器随机进行赋值。这个博主写的很详细，关于指针的所占字节大小的原因。：访问不允许访问的地址、通过指针修改不可修改的值。指针 就是地址 大小就是4个字节（32位系统）指针的使用：p = &a *p = 常量或变量。指针的运算：指针-指针 结果为long类型。指针++/指针–：改变了原有的指针的指向。本质是一个指向有n个空间数组的指针。但是 指向空间的内容不能变；
2025年Solar应急响应公益月赛-7月笔记ing
2301_80216972的博客
07-29 960
看大佬的博客说的是“web挖矿木马，依赖用户浏览器前端，只能是js喽，直接看主页，发现混淆js"在/public/upload目录下有一个类似“冰蝎”的马（应该是哥斯拉），cat看到密码。题目描述:请提交黑客创建隐藏账户的事件（格式为 年/月/日 时:分:秒）？题目描述：请提交黑客创建隐藏账户的事件（格式为 年/月/日 时:分:秒）？黑客使用的木马连接工具的位置在哪里（比如C:\xxxx\xx.exe）？黑客入侵的网站地址是多少（只需要http://xxxxx/）？
《嵌入式C语言笔记（十五）：字符串操作与多维指针深度解析》
weixin_72612809的博客
07-29 278
本文总结了C语言中字符串、指针和数组的重要操作与安全实践。主要内容包括：1.字符串操作推荐使用strn系列安全函数（如strncpy、strncat）替代危险函数；2.const关键字保护数据不被修改，void*指针需类型转换；3.区分数组指针和指针数组的用法；4.指针函数禁止返回局部变量地址，可用静态或全局变量；5.提供字符串基本操作函数实现和二维数组操作示例。关键技巧：使用const保护参数，注意指针生命周期管理，安全操作优先选择带长度限制的函数版本。这些实践对嵌入式开发等安全敏感场景尤为重要。
Python Day16 核心语法笔记整理 及 例题分析
ihghhfffv的博客
07-28 613
本文摘要： 多继承方法调用规则：super()遵循MRO顺序，显式调用需用类名.方法名 抽象类必须继承ABC，子类需实现所有抽象方法才能实例化 双向链表实现：包含头尾指针，支持增删查改和索引优化 对象数量限制：通过__new__控制最多创建5个实例 员工薪资系统：抽象类定义接口，子类实现不同薪资计算逻辑 角色对战游戏：包含技能、防御、复活等回合制机制 链表扩展功能：支持乘法、条件过滤等操作 责任链模式：按顺序尝试不同图片格式读取器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值