Vue组件Vue-highlight 实现代码高亮

举报
SHQ5785 发表于 2022/03/19 17:04:51 2022/03/19
【摘要】 一、前言highlight.js 支持几十种编程语言(点击下载),既包括常见的 C、java、javascript、ruby、python、html、css、sql等,还支持 apache、nginx 这些配置文件的语法。除了引入Vue-highlight.js文件外,还需要引入样式文件highlight.js。vue-highlight.js只是实现了代码高亮的功能,安装包里是没有css...

一、前言

highlight.js 支持几十种编程语言(点击下载),既包括常见的 Cjavajavascriptrubypythonhtmlcsssql等,还支持 apachenginx 这些配置文件的语法。

除了引入Vue-highlight.js文件外,还需要引入样式文件highlight.jsvue-highlight.js只是实现了代码高亮的功能,安装包里是没有css样式文件,因此我们还需要安装一个highlight.js来实现真正的样式。

二、安装

npm install --save vue-highlightjs

三、引用

在我们的入口文件main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

我们使用的是atom-one-dark.css这个样式文件,可以根据highlight.js网上的面配色自定义展示效果。也可以看项目中安装的highlight.js中的文件去看是否具备这个样式表。

四、使用

因为已经实现了vue的组件指令化,所以使用起来非常简便。

<!-- 1.如果你需要高亮的代码是一个变量值,那么你可以这样使用它。 其中 sourcecode 为变量。 -->
<pre v-highlightjs="sourcecode"><code></code></pre>

<!-- 2.如果你需要高亮的代码固定的源代码,那么你可以这样使用它。 -->
<pre v-highlightjs><code>const s = new Date().toString()</code></pre>

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。