Vue进阶（幺伍叁）：Vue-highlight 实现代码高亮

highlight.js 支持几十种编程语言（点击下载），既包括常见的 C、java、javaScript、ruby、python、html、css、sql等，还支持 apache、nginx 这些配置文件的语法。

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

安装

npm install --save vue-highlightjs

1

引用

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

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

1

2

3

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

使用

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

const s = new Date().toString()

1

2

3

4

5

拓展阅读

hignlight.js官网

highlight.js demo

vue-highlightjs github

自定义插件官方文档

自定义指令官方文档

JavaScript Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。