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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
php实现算术验证码功能
2018/12/05 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
SQL SERVER面试资料
2013/03/30 面试题
出纳岗位职责模板
2013/11/27 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
二年级数学教学反思
2014/01/21 职场文书
护理职业生涯规划书
2014/01/24 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
年终工作总结范文2014
2014/11/27 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python