The rear end of the string is a string of data returned, the demand for the product is a series of code highlighting operation, headache die
A method of using split punctuate && cutting operation highlighted
template section:
<div v-for="(item, index) in split" :key="index">
<table>
<tr v-html="item" />
</table>
</div>
js part:
this rule is defined behind each of the rear end of a plus "\ n", said distal end after acquiring the data according to the rear end of the cutting operation remain punctuation this identification. Highlights still cutting, cutting in front finish punctuate the basis on each one before selecting 17 characters (here you can set up their own rule) in red, white space after the last field is yellow-green.
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;
}
}
The second method utilizing a tag to achieve pre and highlight.js
A search found there are many, it is roughly the following form to go on this network.
<pre>
<code></code>
</pre>
But highlight.js must be configured in the Vue.
Specifically this article are: implementation code highlighted in vue by highlight.js .
