vue-prism-editor插件，让代码块高亮

①npm 下载依赖

npm install vue-prism-editor

vue-prism-editor需要依赖 prism.js，所以需要安装prismjs

npm install prismjs

②在需要的vue页面引入

import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css';

再引入组件

components: { PrismEditor },

template中

<prism-editor class="my-editor" v-model="code" :highlight="highlighter"
 readonly :line-numbers="true" >
</prism-editor>

// highlighter  methods中的方法
// my-editor 插件里面的样式
// code data中的需要渲染的字符串代码块
// readonly 只读
// line-numbers 是否显示行号

css样式

  .my-editor {
    background: #f9fafa; // 背景颜色
    color: #000;  // 字体颜色
 
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 16px; // 字体大小
    line-height: 1.5; // 行间距
    padding: 5px; // 内边距
    font-weight: 500; // 字体是否加粗
  }

  .my-editor /deep/ .prism-editor__textarea::selection{ // 鼠标选中时样式
    background-color: #cce2ff !important;
    color: #000 !important;
    user-select:none;
  }

  .my-editor /deep/ .prism-editor__textarea:focus { // 鼠标点击触发时样式
      border: 0px solid #007bff;
      outline: none; 
  }

  .my-editor /deep/ .prism-editor__line-numbers{ // 代码块跟行号的距离
    padding-right: 10px;
  }

methods中的方法

    highlighter(code) {
        return highlight(code, languages.js)
    },

data中code的值

code: '/**\n* JS判断两个数组是否相等\n* @param {Array} arr1\n* @param {Array} arr2\n* @returns {boolean} 返回true 或 false\n*/\nfunction arrayEqual(arr1, arr2) {\n    if (arr1 === arr2) return true;\n    if (arr1.length != arr2.length) return false;\n    for (var i = 0; i < arr1.length; ++i) {\n        if (arr1[i] !== arr2[i]) return false;\n    }\n    return true;\n}'

效果

完整代码

<style lang="less" scoped>
  .my-editor {
    background: #f9fafa;
    color: #000;

    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 16px;
    line-height: 1.5;
    padding: 5px;
    font-weight: 500;
  }

  .my-editor /deep/ .prism-editor__textarea::selection{
    background-color: #cce2ff !important;
    color: #000 !important;
    user-select:none;
  }

  .my-editor /deep/ .prism-editor__textarea:focus {
      border: 0px solid #007bff;
      outline: none; 
  }

  .my-editor /deep/ .prism-editor__line-numbers{
    padding-right: 10px;
  }
</style>

<template>
  <div>
    <Card>
      <prism-editor class="my-editor" v-model="code" :highlight="highlighter" readonly :line-numbers="true" >
      </prism-editor>
    </Card>
  </div>
</template>

<script>
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
// import 'prismjs/themes/prism-solarizedlight.css';  // 代码的其他样式风格
// import 'prismjs/themes/prism-coy.css';
// import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/themes/prism.css';  // 如果想代码换个样式风格，把这个注释了，上面的三个放开一个
export default {
  components: { PrismEditor },
  data(){
    return {
      code: '/**\n* JS判断两个数组是否相等\n* @param {Array} arr1\n* @param {Array} arr2\n* @returns {boolean} 返回true 或 false\n*/\nfunction arrayEqual(arr1, arr2) {\n    if (arr1 === arr2) return true;\n    if (arr1.length != arr2.length) return false;\n    for (var i = 0; i < arr1.length; ++i) {\n        if (arr1[i] !== arr2[i]) return false;\n    }\n    return true;\n}'
    }
  },
  methods:{
    highlighter(code) {
        return highlight(code, languages.js)
    },
  }
}
</script>

该插件的属性

插件的事件

vue-prism-editor插件，让代码块高亮

猜你喜欢