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
来实现真正的样式。
二、安装
复制代码
三、引用
在我们的入口文件main.js
中引用依赖
复制代码
我们使用的是atom-one-dark.css
这个样式文件,可以根据highlight.js网上的面配色自定义展示效果。也可以看项目中安装的highlight.js
中的文件去看是否具备这个样式表。
四、使用
因为已经实现了vue
的组件指令化,所以使用起来非常简便。
复制代码
五、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/8f64bf6eb59e85115a059b9c9】。文章转载请联系作者。
评论