Vue中使用highlight.js

通过自定义指令的方式来实现在Vue中实现语法高亮

基本实现

  • 安装
1
npm install highlight.js --save
  • 编码
1
2
3
4
5
6
7
8
9
10
// Vue-cli生成的工程文件的src/main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件

Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})
  • 使用
1
<div v-html="markdownhtml" v-highlight></div>

封装成插件

  • 编写插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// highlight.js
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'

let Highlight = {}
Highlight.install = function (Vue, options) {
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
Hljs.highlightBlock(block)
})
})
}

export default Highlight
  • 使用插件
1
2
import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :