在 Vue 项目中需要展示 SQL 代码，于是找了相关的库。最后决定用了 highlignt.js。简单说下用法。
安装
$ npm install highlight.js --save
# or
$ yarn add highlight.js
使用
- 全局（如
main.js）注册 highlight.js 插件。
import Vue from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/xcode.css' // 代码高亮样式
Vue.use(hljs.vuePlugin)
注意： 这里必须要加载一种代码高亮的 css 样式，否则代码块是没有高亮效果的。
注意： 这里必须要加载一种代码高亮的 css 样式，否则代码块是没有高亮效果的。
注意： 这里必须要加载一种代码高亮的 css 样式，否则代码块是没有高亮效果的。
我就遇到了这个小坑。所有的样式都放在 highlight.js/styles 目录下，据说有 97 种样式之多。预览效果可以查看官方 demo。
- 直接在代码中使用即可
<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
最后
其实很简单，就是有个样式上的小坑。不过 hljs 是真的挺强大的，能满足大部分需求。
