vue项目页面嵌入代码块vue-prism-editor的实现(可在页面编辑代码，有格式化)

2023年2月18日 25次阅读 来源: weixin_55986587

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.html代码

<prism-editor
 class="my-editor height-300"
 v-model="code"
 :highlight="highlighter"
 :line-numbers="lineNumbers"
></prism-editor>
/** code----为需要高亮显示的代码内容 highlighter----定义在methods中的一个方法，用于把code高亮显示 lineNumbers----是否可编辑标识 */

4.js代码

export default { 
 components: { 
 PrismEditor
 },
 data: () => ({ 
 code: 'console.log("Hello World")',
 lineNumbers: true, // true为编辑模式， false只展示不可编辑
 }),
 methods: { 
 highlighter(code) { 
 return highlight(code, languages.js); //returns html
 }
 }
};

5.css代码

<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: 300px;
}
</style>

《vue项目页面嵌入代码块vue-prism-editor的实现(可在页面编辑代码，有格式化)》

    原文作者：weixin_55986587
    原文地址: https://blog.csdn.net/weixin_55986587/article/details/121161384
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞