codemirror6 makes markdown editor (source mode)

codemirror makes markdown source code mode editor

Install

Install codemirror and codemirror's markdown language extension

npm install codemirror
npm install @codemirror/lang-markdown

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

Use in 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 can modify the CSS style in the EditorView module, thereby affecting the style display of the editor.

You can only modify cm-the class style at the beginning, and you also need to add &a selector in front of the selector to distinguish css. In the official documentation CodeMirror Styling Example

example:&.cm-editor.cm-focused --> .cm-editor.cm-focused

Effect

Generally speaking, it feels usable, but not very user-friendly. The official documentation is a bit scattered, and the keyword highlighting function is independent. I searched the official documentation for a long time, but I couldn't find how to change the markdown syntax highlighting @codemirror/lang-markdownstyle in this plug-in. (I found it later)