vue highlight,

　　最近忙着开发自己的开发脚手架。当我作为代码生成器工作时，我有一个预览功能，它需要突出显示代码。下面文章主要介绍vue3引入highlight.js突出代码的相关信息。有需要的朋友可以参考一下。

背景描述：

　　在项目开发中，经常会有一些日志预览和文件预览，需要突出显示。这样可以让文字内容显得更加友好，易于阅读。

　　效果类似于markdown语法的代码突出显示如下：

　　test GUI class= testplangui test class= test plan testname=自动化测试

　　string prop name= test plan . comments /string prop

　　bool prop name= test plan . functional _ mode false/bool prop

　　bool prop name= test plan . teardown _ on _ shut down true/bool prop

　　bool prop name= test plan . serialize _ thread groups false/bool prop

　　element prop name= test plan . user _ defined _ variables element type= Arguments

　　collection prop name= arguments . arguments /

　　/elementProp

　　/测试计划

一、安装依赖：

　　注意：我们需要安装的依赖有两个，网上的博文，都是一个人写的，是个比较坑。

　　npm安装-保存highlight.js

　　npm安装-保存@ highlight js/vue-插件

　　命令行如下

　　# #这是highlight.js的基本依赖

　　npm安装-保存highlight.js

　　# #安装支持vue3的@highlightjs/vue-plugin依赖项

　　npm安装-保存@ highlight js/vue-插件

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

　　需要介绍以下内容

　　风格，主入口介绍的风格用于全球统一，或者你想要的风格可以单独页面介绍。效果参考https://highlightjs.org/static/demo/,官网

　　根据薪资包组件，更改“导入”highlight.js/styles/atom-one-dark.css并将“样式”后的值更改为所需的样式。

　　#-文件src/main.ts src/main.js

　　#突出显示样式、依赖包、组件

　　导入 highlight . js/styles/atom-one-dark . CSS

　　导入 highlight.js/lib/common

　　从 @highlightjs/vue-plugin 导入hljsVuePlugin

　　从“vue”导入{ computed，createApp }

　　从导入应用程序。/App.vue

　　const app=createApp(App)

　　//引入代码高亮，全局注册。

　　app.use(hljsVuePlugin)

　　app . mount(# app)

三、页面使用：

　　！-将数据绑定到代码属性-

　　highlightjs自动检测：code=code /

　　！-或者直接将显示的代码写入“代码”

　　highlight js language= JavaScript code= var x=5；/

　　例子如下：

　　可以用语言来指定具体的语言，比如javascript、xml等。

　　如果省略该值，highlightjs将自动识别相应的语言。

四、看下效果展示吧：

五、一些优化：

1.问题

　　你可以看到生成的代码是预包装的，会有一个1rem的margin-bottom，不是很有效。

2.解决方法

　　在相应的页面上，使用style标记重写样式，注意不要添加scoped。

　　样式lang=scss

　　前{

　　边距-底部：0；

　　}

　　/风格

3. 处理后的效果

　　这是一个例子。当然，你可以根据实际项目进行风格的改变。

　　码字不容易。如果对你有帮助，就给它点个赞()

　　更多详情请参考官方文件，

　　链接到https://highlightjs.org/,官方网站

　　官方网站Github链接：https://github.com/highlightjs/vue-plugin

总结

　　关于vue3介绍highlight.js的这篇文章就到这里。更多关于vue3对highlight.js的介绍，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。