vue使用highLight.js实现代码高亮
作者：互联网
vue使用highLight.js实现代码高亮
背景：
但是仅仅限于对代码进行高亮操作，意识到如果给到一片文章，里面有文本有代码有图片就需要进行正则匹配之类的处理这篇文章。。。
效果图：
安装引入：
为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的包里没有css的样式文件，因此还需要安装一个highlight.js来实现真正的样式。
npm install --save vue-highlightjs
npm install --save highlight.js
在main.js引入
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
代码使用：
<template>
<div class="ueditor">
<pre v-highlightjs=codeData ><code class="javascript"></code></pre>
<br>
<pre v-highlightjs=codeData1 ><code class="html"></code></pre>
<br>
<pre v-highlightjs=codeData2 ><code class="html"></code></pre>
<br>
<pre v-highlightjs>
<code>
@Test
void testGetAll(){
List stus = stuService.queryAllStu();
stus.forEach(e -> {
System.out.println(e);
});
}
</code>
</pre>
</div>
</template>
<script>
import codeDatas from './data'
export default {
data () {
return {
codeData:codeDatas.codeData,
codeData1:codeDatas.codeData1,
codeData2:codeDatas.codeData2,
codeData3:codeDatas.codeData3,
msg:undefined,
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.hljs{
font-size: 15px;
}
.info{
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
data.js存的一些存到数据库的文本内容
let datas = {
codeData:"function(){\n console.log(1233)\n}",
codeData1:"<!DOCTYPE html>\n<html>\n<head>\n<title>Vue2.x</title>\n<meta charset=\"utf-8\">\n<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n</head>\n<body>\n<div id=\"app\">\n 网站名：{{ message }}\n</div>\n\n<script>\n var app = new Vue({\n el: '#app',\n data: {\n message: \"自如初博客\"\n }\n })\n</script>\n</body>\n</html>",
codeData2:"<p>这里是markdown编辑的内容</p>\n<pre><div class=\"hljs\"><code class=\"lang-html\"><span class=\"hljs-meta\"><!DOCTYPE html></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">html</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">title</span>></span>Vue2.x<span class=\"hljs-tag\"></<span class=\"hljs-name\">title</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"</span>></span><span class=\"undefined\"></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>></span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></span><span class=\"javascript\">\n <span class=\"hljs-keyword\">var</span> app = <span class=\"hljs-keyword\">new</span> Vue({\n <span class=\"hljs-attr\">el</span>: <span class=\"hljs-string\">'#app'</span>,\n <span class=\"hljs-attr\">data</span>: {\n <span class=\"hljs-attr\">message</span>: <span class=\"hljs-string\">\"自如初博客\"</span>\n }\n })\n</span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">html</span>></span>\n\n</code></div></pre>\n",
codeData3:"<p>这里是markdown编辑的内容</p>\n<ol>\n<li>第一个</li>\n<li>第二个</li>\n<li><strong>第三个</strong></li>\n</ol>\n<pre><div class=\"hljs\"><code class=\"lang-html\"><span class=\"hljs-meta\"><!DOCTYPE html></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">html</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">title</span>></span>Vue2.x<span class=\"hljs-tag\"></<span class=\"hljs-name\">title</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"</span>></span><span class=\"undefined\"></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>></span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></span><span class=\"javascript\">\n <span class=\"hljs-keyword\">var</span> app = <span class=\"hljs-keyword\">new</span> Vue({\n <span class=\"hljs-attr\">el</span>: <span class=\"hljs-string\">'#app'</span>,\n <span class=\"hljs-attr\">data</span>: {\n <span class=\"hljs-attr\">message</span>: <span class=\"hljs-string\">\"自如初博客\"</span>\n }\n })\n</span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">html</span>></span>\n\n</code></div></pre>"
}
export default datas
提示：
后面有提到如何处理正片markdown格式的文章。
标签：gt,script,app,js,lt,vue,highLight 来源： https://blog.csdn.net/qq_44706619/article/details/119377102