1.效果
封装的这个组件，可以通过props传入数据，使后端的数据可以以代码的形式展现在页面上，供用户浏览，此组件的效果类似于CSDN的代码段功能。
1. 可输入代码，并且代码语法高亮
2. 支持编辑和不可编辑模式
3. 提交到后端到代码内容为字符串格式
效果如下：
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>
