十八、学习VUE前端-vue3 使用highlight

1、背景

博客需要添加代码。我看highlightjs一直在维护更新，所以就选他了

2、经过

在vue下使用，也是调查尝试了一段时间。这里把我整个调查过程中的经过记录下来

首先是读一遍官网：

https://highlightjs.org/

https://highlightjs.org/usage/

2-1、我首先是尝试的vue的插件vue-plugin

为什么用这个的原因：因为搜索vue3 highlightjs就这个出现的最多。O(∩_∩)O哈哈~

虽然我最终没有采用，但是网上的大部分文章都没啥错误，都可以用。我这边也就简单把代码贴出来了

参考文章：vue3引入 highlight.js 进行代码高亮

（1）安装

## 这个是highlight.js基础依赖
npm install --save highlight.js
## 安装支持vue3 的@highlightjs/vue-plugin 依赖
npm install --save @highlightjs/vue-plugin

（2）main.js文件

import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

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

（3）使用

<div id="app">
    <!-- bind to a data property named `code` -->
    <highlightjs autodetect :code="code" />
    <!-- or literal code works as well -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

（4）为什么不用

主要是我有一些存量的文章，主要是用<pre><code>。我也不想再改成<highlightjs>了。。。。。。

当我能够正常显示出var x = 5;之后 这个方案止步于此了

2-2、改成nodejs的使用方式。这个晚上的资料也很多，大部分也都能用

大致上是这个方案，但是如果只是这种方式的话还是不行。后面会说到这个问题

（1）安装

## 为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的包里没有css的样式文件，因此还需要安装一个highlight.js来实现真正的样式。
npm install --save vue-highlightjs
npm install --save highlight.js

（2）main.js

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

const app = createApp(App)
app.directive('highlight', {
    mounted(el) {
        let blocks = el.querySelectorAll('pre code');
        for (let i = 0; i < blocks.length; i++) {
            hljs.highlightElement(blocks[i]);
        }
    }
})

（3）使用。<pre>标签中加上v-highlight

&lt;pre v-highlight><code class="javascript">var name = 'tom'; function test(){};</code></pre&gt;

显示成这样，是没有问题的。

2-3、以上方案是没啥问题，但是我实际上不是这么来的。我的这段代码并不是初始化就加载到页面上的，而是调用后端接口后，动态加载到页面上的

（1）代码是。注意v-html的使用

<span v-html="customerArticle.content"></span>

如果还是按照上述的方案，则显示效果是。

实际上这段显示是以下代码。可以看到，实际上就是现实了一段普通的字符串，没有任何的解析。

&lt;pre v-highlight=""><code class="javascript hljs">var name = 'tom'; function test(){};</code></pre&gt;

（2）原因。

由于是我是调用接口后赋值的，所以在页面初始话的时候是没有任何内容让highlightjs来处理的

（3）对应思路

既然是初始化没有数据，那接下来显而易见的就是等到代码渲染到页面上了之后，我在重新让highlightjs处理一遍页面即可

1、怎样保证页面渲染完成之后在执行处理，用到的就是$nextTick()

2、渲染完成之后怎么重新让highlightjs重新处理

参考的就是方案2-2的处理

（4）我这边最终的代码

1、页面

<span v-html="customerArticle.content"></span>

2、引入

import { reactive } from "vue";
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

3、定义变量

setup() {
        var customerArticle = reactive({});
        return {
            customerArticle
        }
    }

4、调用后端方法，获得content的内容

这里需要注意的地方

（1）使用this.$nextTick()是不起作用的，要使用我代码中的这种方式option.$nextTick()

（2）在赋值的时候，使用this.customerArticle = response.data.data也是不起作用的。要使用option.customerArticle。而且我用的是Object.assign()方法

（3）我这里使用的是hljs.highlightElement。在查资料的时候，会发现有的文章用的是hljs.highlightBlock

这个是依照版本来使用的。高版本用highlightElement，低版本用highlightBlock

Deprecated as of 10.7.0. highlightBlock will be removed entirely in v12.0
Deprecated as of 10.7.0. Please use highlightElement now.

mounted() {
    this.$options.methods.customerArticleDetailFunc(this);
},
methods: {
    customerArticleDetailFunc(option) {
        option.$axios.get('/article/detail/')
        .then((response) => {
            Object.assign(option.customerArticle, response.data.data);
            //代码高亮
            option.$nextTick(() => {
                let blocks = document.querySelectorAll('pre code');
                for (let i = 0; i < blocks.length; i++) {
                    hljs.highlightElement(blocks[i]);
                }
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    }
  }

搞定。接下来是准备给highlightjs加上行号。