【vue】 vue引入highlight.js高亮显示代码

1.安装npm install --save vue-highlightjsnpm install --save highlight.js这里解释一下为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的安装包里是没有css的样式文件的，因此我们还需要安装一个highlight.js来实现真正的样式。2.引入在我们的入口文件main.js中引用依赖imp...

WANGHUAN-

6316人浏览 · 2019-05-24 16:32:28

WANGHUAN- · 2019-05-24 16:32:28 发布

1.安装

npm install --save vue-highlightjs
npm install --save highlight.js

这里解释一下为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的安装包里是没有css的样式文件的，因此我们还需要安装一个highlight.js来实现真正的样式。
2.引入

在我们的入口文件main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

3.使用

 <pre v-highlightjs=codeDate ><code class="lua"></code></pre>

class内的lua为对应要设置高亮的脚本语言
例： javascript <code class="javascript "></code

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}$/, //不连续的两位字母// /^