前言
在 Web 开发中，代码高亮是非常常见的需求。常用的开源库如 highlight.js、prism.js 等，但是它们只提供了代码高亮的功能，无法实现编辑器的交互等操作功能。随着前端框架的发展，越来越多的项目要求实现代码编辑器的功能。Vue.js 社区有一款非常好用的代码编辑器组件——vue-prism-editor，它基于 vue.js 和 Prism.js 实现了代码高亮和编辑器功能。
安装
使用 npm 安装 vue-prism-editor
$ npm i vue-prism-editor@latest -S
配置
// main.js import Vue from 'vue' import vuePrismEditor from 'vue-prism-editor' import 'vue-prism-editor/dist/VuePrismEditor.css' Vue.use(vuePrismEditor)
基本用法
-- -------------------- ---- -------
----------
----- ----------------------
-----------
--------
------ ------- -
------ -
------ -
----- --
-
-
-
---------props
value [String]
设置编辑器中的代码，支持 v-model 双向绑定。
<vupe v-model="code"></vupe>
lang [String]
指定语言，支持的语言列表请参考 Prism.js 官方文档。
<vupe lang="javascript"></vupe>
theme [String]
指定主题，支持的主题请参考 Prism.js 官方文档。
<vupe theme="okaidia"></vupe>
readonly [Boolean]
只读模式，禁止编辑。
<vupe :readonly="true"></vupe>
line-numbers [Boolean]
开启行号，需要引入 prism-line-numbers.js 样式文件。
<vupe :line-numbers="true"></vupe>
事件
change
编辑器内容改变时触发。
<vupe @change="onChange"></vupe>
blur
编辑器失去焦点时触发。
<vupe @blur="onBlur"></vupe>
方法
focus()
设置焦点。
this.$refs.editor.focus()
示例代码
-- -------------------- ---- -------
----------
-----
------- ----- ------ -------
----- -------------- ----------------- ---------------- -------------------- ----------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- --------- ---------- -
------------------ --------
--
-
--
-------- -
-------- -
-------------------
-
-
-
---------结尾
使用 vue-prism-editor 可以快速实现代码高亮及编辑器功能，让代码展示更加美观和直观，而其丰富的 props 和事件也为我们提供了更多的自定义和交互方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6dfc98a9b7065299ccb9db