vue3引入highlight.js进行代码高亮的方法实例


Posted in Vue.js onApril 08, 2022

背景描述:

在项目开发中,经常一些日志预览,还有文件的预览,需要进行代码高亮显示。这样可以让文本内容展示的时候显得更加友好,也便于阅读

效果类似markdown语法的代码高亮,如下:

<TestPlan guiclass="TestPlanGui" testclass="TestPlan" testname="自动化测试">
      <stringProp name="TestPlan.comments"></stringProp>
      <boolProp name="TestPlan.functional_mode">false</boolProp>
      <boolProp name="TestPlan.tearDown_on_shutdown">true</boolProp>
      <boolProp name="TestPlan.serialize_threadgroups">false</boolProp>
      <elementProp name="TestPlan.user_defined_variables" elementType="Arguments">
        <collectionProp name="Arguments.arguments"/>
      </elementProp>
    </TestPlan>

一、安装依赖:

注意:我们需要安装的依赖有两个,网上的博文,都是写的一个,比较坑。
npm install --save highlight.js
npm install --save @highlightjs/vue-plugin
命令行如下

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

二、在vue3主入口main文件,对highlight进行引入和注册:

需要引入的有

样式 ,在main主入口引入样式为全局统一都使用这个样式,也可以在单独的页面引入,你想要的样式。样式效果参考官网:https://highlightjs.org/static/demo/
更改 import ‘highlight.js/styles/atom-one-dark.css’ 把styles 后面的值改成你想要的样式就行依赖包组件
# --- 文件src/main.ts | src/main.js 
# highlight 的样式,依赖包,组件
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

import { computed, createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 引入代码高亮,并进行全局注册
app.use(hljsVuePlugin)
app.mount('#app')

三、页面使用:

<!-- 把数据绑定到 `code` 属性-->
    <highlightjs autodetect :code="code" />
    <!--或者直接将显示的代码写到 `code`中 -->
    <highlightjs language='javascript' code="var x = 5;" />

示例如下:
可以使用 language 指定具体的语言,如javascript、xml等
这个值省略,highlightjs 也会自动识别对应的语言
vue3引入highlight.js进行代码高亮的方法实例

四、看下效果展示吧:

vue3引入highlight.js进行代码高亮的方法实例

vue3引入highlight.js进行代码高亮的方法实例

五、一些优化:

1.问题

可以看到生成的代码 是pre包裹的,会有个1rem 的margin-bottom,效果不是很好
vue3引入highlight.js进行代码高亮的方法实例

2.解决方法

在对应的页面,使用style 标签,对样式进行重写,注意不要加 scoped

<style lang="scss">
pre {
  margin-bottom: 0;
}
</style>

vue3引入highlight.js进行代码高亮的方法实例

3. 处理后的效果

这个是示例,当然你们可以根据实际的项目进行样式改造
码字不容易,对你有帮助的话,给个点赞吧 ☻ (✿◠‿◠)
更多详情,请查阅官方文档,
官网链接:https://highlightjs.org/
官网github链接:https://github.com/highlightjs/vue-plugin

vue3引入highlight.js进行代码高亮的方法实例

总结

到此这篇关于vue3引入highlight.js进行代码高亮例的文章就介绍到这了,更多相关vue3引入highlight.js代码高亮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
vue中的可拖拽宽度div的实现示例
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
Axios代理配置及封装响应拦截处理方式
You might like
PHP中session变量的销毁
2014/02/27 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
python简单文本处理的方法
2015/07/10 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python字符串的拼接方法总结
2019/11/18 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
PyQt实现计数器的方法示例
2021/01/18 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
劳动竞赛口号
2014/06/16 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
资产运营委托书范本
2014/10/16 职场文书
检讨书范文2000字
2015/01/28 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
数据库连接池
2021/04/06 MySQL
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis