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" +
              " \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