写点什么

Vue 进阶(幺伍叁):Vue-highlight 实现代码高亮

发布于: 刚刚
Vue进阶(幺伍叁):Vue-highlight 实现代码高亮

一、前言

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>
复制代码

五、拓展阅读

发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺伍叁):Vue-highlight 实现代码高亮