vue项目页面嵌入代码块vue-prism-editor的实现
作者:韩大璐 发布时间:2024-04-27 16:14:03
需求:
1. 可输入代码,并且代码语法高亮
2. 支持编辑和不可编辑模式
3. 提交到后端到代码内容为字符串格式
实现
在gitbug上找到vue-prism-editor,可以满足以上需求。
使用
1.安装vue-prism-editor
npm install vue-prism-editor
由于vue-prism-editor需要依赖 prismjs,所以还需要安装prismjs
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 */
.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>
注意: css样式必写,不然编辑器没有样式,只是纯白页面展示
“height-300” 是给编辑器设置高度的,高度可自行设置,也可以不设置,这个样式非必需
到这里,功能基本就实现了。
但是在过程中遇到一些问题,这里也一并总结。
问题
1.如果仅安装vue-prism-editor
,没有安装prismjs,会报以下错误,npm install prismjs
即可
2.如果报错中有提示升级或者安装ajv或者vue2.6.X版本,根据提示安装即可
npm install ajv@^6.9.1
npm install vue@^2.6.11
个人理解,如果ajv和vue版本过低,可能会导致vue-prism-editor
依赖的相关东西安装不上,建议升级完ajv和vue之后,再重新安装vue-prism-editor
和prismjs.
3.vue与vue-template-compiler版本不一致
卸载低版本vue-template-compiler
npm uninstall vue-template-compiler
然后安装跟vue同样版本的vue-template-compiler
npm install vue-template-compiler@2.6.11
来源:https://blog.csdn.net/weixin_41257563/article/details/109381066
猜你喜欢
- 前言利用Python的ffmpy库提取视频中的音频。本文提供工具类代码。环境依赖需要安装ffmpy,安装指令:pip install ffm
- 今天继续给大家介绍Linux运维相关知识,本文主要内容是SQL bool盲注和时间盲注。免责声明:本文所介绍的内容仅做学习交流使用,严禁利用
- 最近,我有机会在一个真实的 Golang 场景中使用泛型,同时寻找与 Stream filter(Predicate<? super
- Tkinter库制作记事本现在为了创建这个记事本,你的系统中应该已经安装了 Python 3 和 Tkinter。您可以根据系统要求下载合适
- 在JavaScript中我们需要用到trim的地方很多,但是JavaScript又没有独立的trim函数或者方法可以使用,所以我们需要自己写
- 1.配置anaconda环境以下内容在下载完anaconda后实现快捷键win+r,打出命令行cmd,进入黑色 界面输入conda info
- 最近做了一个项目,将从微信下载的音频文件(默认为.amr格式)转化为mp3格式(否则前端播放将会遇到困难)上传到云端。经过一番研究,最终决定
- scipy.misc.logsumexp函数的输入参数有(a, axis=None, b=None, keepdims=False, ret
- 目录一、MySQL的join buffer二、join buffer cache存储空间的分配三、普通的多表查询实现四、join buffe
- 如下所示:class Login(QMainWindow): """登录窗口""
- 1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,r
- 前言看到这里已经学习了创建各种 Python 数据类型的值。并且显示的值都是文字或常量值。>>> print(9.98)9
- 这个网页颜色表是很好用,鼠标点击颜色即可复制颜色值到剪贴板,方便大家设计取色。下载苏昱css2 样式表中文手册包括颜色表:W3C- 十六色色
- pandas 对于数据分析的人员来说都是必须熟悉的第三方库,pandas 在科学计算上有很大的优势,特别是对于数据分析人员来说,相当的重要。
- 转眼间上次写文章已经是 2022年12月15日的事情啦,本来从2022年7月份开始写作之后保持着每周一篇,然而从12月15日后断更了这么久,
- MySQL 如何从表中取出随机数据 以前在群里讨论过这个问题,比较的有意思.mysql的语法真好玩. 他们原来都想用P
- 目录MySQL数据库重命名的方法 第一种方法:rename database 弃用了第二种方法:mysqldump 备份第三种方法
- 如下所示:import numpy as npimport pandas as pdfrom pandas import Series,Da
- 1、文件添加方式:pycharm提供了一个在新建文件自动生成文件头注释的功能,可以实现自动生成运行环境,作者、日期等必要信息,使用比较方便,
- K近邻法是有监督学习方法,原理很简单,假设我们有一堆分好类的样本数据,分好类表示每个样本都一个对应的已知类标签,当来一个测试样本要我们判断它