1 When using highlighted frames, it is recommended to check whether the UI frame you use prevents copying code. If so, please deal with the UI frame first
2 Use NPM to download the highlight.js package
npm install --save highlight.js -S
Copy the code
3 Create the highlight folder within assets. Create highlight.js in this folder
Note: these two folders and file names are not fixed
4 Enter the following content in the js folder
import Vue from 'vue';
import Hljs from 'highlight.js'; // monokai-sublimate. CSS can change styles, such as lightfair. CSS import for background transparency'highlight.js/styles/monokai-sublime.css';
let Highlight = {};
Highlight.install = function{highlightA vue.directive (Vue, options) {// If you have data before binding, call highlightA vue.directive ('highlightA', {
inserted: function(el) {
let blocks = el.querySelectorAll('pre code');
for (leti = 0; i < blocks.length; i++) { const item = blocks[i]; Hljs.highlightBlock(item); Hljs.highlightBlock(item); }}}); HighlightB vue. directive('highlightB', { componentUpdated: function(el) { let blocks = el.querySelectorAll('pre code'); for (leti = 0; i < blocks.length; i++) { const item = blocks[i]; Hljs.highlightBlock(item); }}}); };export default Highlight;Copy the code
5 Configure the path in main.js
import Highlight from './assets/highlight/highlight'
Vue.use(Highlight)
Copy the code
6 Write the following code in the vue file you want to highlight
<template>
<div>
<pre v-highlight-a>
<code>{{data}}}</code>
</pre>
</div>
</template>
<script>
export default {
name: "preCode".data() {return{
"data":"<li>\n" +
" \n" +
"
+
"
\n" +
" \n" +
" \n" +
" "
}
}
}
</script>
<style scoped>
</style>
Copy the code
Note: There is a small bug that must be seen in vue script tag can not appear two