Vue 中使用 codemirror

最新推荐文章于 2025-11-10 05:02:37 发布

原创

最新推荐文章于 2025-11-10 05:02:37 发布 · 1w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#codemirror

本文介绍了如何在Vue项目中通过vue-codemirror插件实现代码编辑功能，包括安装步骤、主题配置、cmOptions选项和实际应用示例。使用了dracula主题，并设置了Vue代码高亮和阅读模式。

一、安装

官网地址：https://codemirror.net/

npm 插件地址：https://www.npmjs.com/package/vue-codemirror

vue 项目中安装，

npm install vue-codemirror --save

可在 package.json 文件中看到，当前是 4.0.6 版

二、使用

1、引入

这里是局部引入，vue 文件中引入

主题 dracula 是目前我觉得还比较好看的样式，可在路径 node_modules\codemirror\mode 下换其它样式；

mode 是 vue 类型，就不用单独设置 JavaScript、CSS 和 html；

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/s

最低0.47元/天解锁文章