封装代码编辑组件-CFANZ编程社区

1.效果

效果如下：

2. 安装插件

1.安装vue-prism-editor
npm install vue-prism-editor
npm install prismjs // 样式

2.在需要使用vue-prism-editor的组件中引入
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
 
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

3.组件完整代码如下：

自己新建 .vue文件，然后注册为全局组件。即可任意使用。

<!--
 * @Author: your name
 * @Date: 2022-01-06 11:42:21
 * @LastEditTime: 2022-01-06 11:45:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \dogsziji\src\views\about\index.vue
-->
<template>
  <div>
    <prism-editor
      class="my-editor height-300"
      v-model="code"
      :highlight="highlighter"
      :line-numbers="lineNumbers"
    ></prism-editor>
  </div>
</template>

<script>
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css' // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism-tomorrow.css' // import syntax highlighting styles

export default {
  components: {
    PrismEditor
  },
  props: ['code'],
  data: () => ({

    lineNumbers: false // true为编辑模式， false只展示不可编辑
  }),
  methods: {
    highlighter (code) {
      return highlight(code, languages.js) // returns html
    }
  }
}

</script>

<style lang="scss">
/* required class css样式必写，不然编辑器没有样式，只是纯白页面展示
“height-300” 是给编辑器设置高度的，高度可自行设置，也可以不设置，这个样式非必需*/
.my-editor {
  background: #2d2d2d;
  color: #ccc;

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

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}

/* not required: */
.height-300 {
  height: 200px;
}
</style>