Vue中对后端返回的data字符串进行代码断句高亮操作

_{后端返回的数据是一串字符串，产品的需求是进行一系列的代码高亮操作，伤脑筋呀}

方法一、利用split进行切割断句&&高亮操作

template部分：

<div v-for="(item, index) in split" :key="index">
    <table>
         <tr v-html="item" />
     </table>
</div>

js部分：
  这个定义的规则是后端在每一句的后面加上“\n”的表示，前端获取到数据之后根据后端留的这个标识进行切割断句的操作。高亮部分依然是切割，在前面切割完断句的基础上，选取每一句前17个字符（这里可以自己设置规则的）为红色，最后一个空格之后的字段为黄绿色。

if (res.resultCode === 200) {
                        this.data = res.data;
                        this.split = this.data.split('\n');
                        for (let i = 0; i < this.split.length; i++) {
                            const pre = '<span style="color: red">';
                            const suf = '</span>';
                            const pre1 = ' <span style="color: yellowgreen">';
                            const suf1 = '</span>';
                            let splitElement = this.split[i];
                            const preStr = pre + splitElement.slice(0, 17) + suf;
                            const sufStr = splitElement.slice(17, splitElement.length);
                            splitElement = preStr + sufStr;
                            const index = splitElement.lastIndexOf(' ');
                            const preStr1 = splitElement.slice(0, index);
                            const sufStr1 = pre1 + splitElement.slice(index, splitElement.length) + suf1;
                            splitElement = preStr1 + sufStr1;
                            this.split[i] = splitElement;
                        }
                    }

方法二、利用标签pre和highlight.js来实现

这个去网络上搜一搜有很多，大致就是下面形式。

<pre>
	<code></code>
</pre>

但是highlight.js一定要在Vue中进行配置。
具体的这篇文章有：通过highlight.js在vue中实现代码高亮.