codemirror 制作markdown源码模式编辑器

安装

安装codemirror和codemirror的markdown语言扩展

npm install codemirror
npm install @codemirror/lang-markdown

var code = "5b23b2ed-bdce-4088-b229-1c092761c49b"

在vue中使用

<template><div ref="doc" class="doc"></div>
</template><script>
import {basicSetup, EditorView} from "codemirror"
import {markdown} from "@codemirror/lang-markdown"
import {languages} from "@codemirror/language-data"export default {name:"MarkCodeMirrorArea",data(){return{doc: "### 测试\n\n```javascript\nlet x = 'y'\n```",}},methods:{createArea(){const customTheme = EditorView.theme({'&.cm-editor.cm-focused': {outline: "none"   //移除外边框线},'&':{font: "16px Arial, monospace ",  //字体}})let view = new EditorView({doc: this.doc,  //文本内容extensions: [  //扩展basicSetup,  //行数显示扩展customTheme,  //自定义主题markdown({   //markdown语言解析扩展codeLanguages: languages  //这里指定markdown中代码块使用的解析扩展})],parent: this.$refs.doc,  //挂载的div块})}},mounted:function(){this.createArea();}}
</script><style scoped>
div{height: 100%;text-align: left;
}
</style>

EditorView.theme

EditorView.theme可以往EditorView模块中修改CSS的样式，从而影响编辑器的样式展示。

只能修改cm-开头的class样式，并且还需要在选择器前面添加&用以区分css的选择器。在官方文档CodeMirror Styling Example

例子：&.cm-editor.cm-focused --> .cm-editor.cm-focused

效果

总体上感觉能用，但是不怎么友好，官方文档有点散乱，而且关键字高亮功能是独立出去的，去官方文档找半天，也没找到怎么改@codemirror/lang-markdown这个插件中的markdown语法的高亮样式。(后来找到了)