vue使用highLight.js实现代码高亮

vue使用highLight.js实现代码高亮背景：但是仅仅限于对代码进行高亮操作，意识到如果给到一片文章，里面有文本有代码有图片就需要进行正则匹配之类的处理这篇文章。。。效果图：安装引入：为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的包里没有css的样式文件，因此还需要安装一个highlight.js来实现真正的样式。npm install --save v

_小郑有点困了

3464人浏览 · 2021-08-04 09:52:55

_小郑有点困了 · 2021-08-04 09:52:55 发布

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\">&lt;!DOCTYPE html&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title</span>&gt;</span>Vue2.x<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">title</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<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>&gt;</span><span class=\"undefined\"></span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>&gt;</span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span>&gt;</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\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">html</span>&gt;</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\">&lt;!DOCTYPE html&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title</span>&gt;</span>Vue2.x<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">title</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<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>&gt;</span><span class=\"undefined\"></span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>&gt;</span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span>&gt;</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\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">html</span>&gt;</span>\n\n</code></div></pre>"
}


export default datas

提示：

后面有提到如何处理正片markdown格式的文章。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^