在 Vue 项目中用 highlight.js 实现前端页面代码高亮

在 Vue 项目中需要展示 SQL 代码，于是找了相关的库。最后决定用了 highlignt.js。简单说下用法。

安装

$ npm install highlight.js --save
# or
$ yarn add highlight.js

使用

1. 全局（如 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。

2. 直接在代码中使用即可

最后

其实很简单，就是有个样式上的小坑。不过 hljs 是真的挺强大的，能满足大部分需求。