highlight.js 代码高亮

如何在VUE2.0项目里使用highlight

1.highlight 10.*版本的

按需引入高亮代码后缀
index.js

const hljs = require('highlight.js/lib');
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));

module.exports = hljs;

然后在main.js中注册

// 代码高亮
import {vuePlugin} from '@/utils/hightLight/index.js';
import 'highlight.js/styles/atom-one-dark-reasonable.css';
console.log(vuePlugin);
Vue.use(vuePlugin);

2.highlight 11.*版本的

下载@highlightjs/vue-plugin
未按需引入

import 'highlight.js/lib/common';
import 'highlight.js/styles/stackoverflow-light.css'
import hljsVuePlugin from "@highlightjs/vue-plugin";

const app = createApp(App)
Vue.use(hljsVuePlugin)

参考链接：https://github.com/highlightjs/vue-plugin
3.任何版本
npm install --save vue-highlightjs
main.js

// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/default.css' // or other highlight.js theme

// Tell Vue.js to use vue-highlightjs
Vue.use(VueHighlightJS)

<!-- If your source-code lives in a variable called 'sourcecode' -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

<!-- If you want to highlight hardcoded source-code -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>

参考链接：https://github.com/metachris/vue-highlightjs