最近在做一个功能，需要在vue3 实现代码编辑器的功能，开发过程中遇到很多坑，简单记录一下
本文参考:blog.csdn.net/weixin_4637…
- 第一步 安装vue-codemirror包
npm install vue-codemirror --save</br> // cnpm install vue-codemirror --save</br>
2。如果你要是想切换主题，并且想用现在现成的dark 主题 请安装下面的两个包
@codemirror/lang-javascript @codemirror/theme-one-dark
npm i @codemirror/lang-javascript
npm i @codemirror/theme-one-dark
其实主题可以自定义 ，后面再说
3：新建组件mirrorTextArea.vue
5：最后一步：在想要应用的地方应用这个组件即可
补充：怎么自定义主题
安装包 @codemirror/view"
let myTheme = EditorView.theme({ // 输入的字体颜色 "&": { color: "#0052D9", backgroundColor: "#FFFFFF" }, ".cm-content": { caretColor: "#0052D9", }, // 激活背景色 ".cm-activeLine": { backgroundColor: "#FAFAFA" }, // 激活序列的背景色 ".cm-activeLineGutter": { backgroundColor: "#FAFAFA" }, //光标的颜色 "&.cm-focused .cm-cursor": { borderLeftColor: "#0052D9" }, // 选中的状态 "&.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: "#0052D9", color: '#FFFFFF' }, // 左侧侧边栏的颜色 ".cm-gutters": { backgroundColor: "#FFFFFF", color: "#ddd", //侧边栏文字颜色 border: "none" } }, { dark: true }) const extensions = [javascript(), myTheme];
