codemirror6 制作markdown编辑器(源码模式)

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语法的高亮样式。(后来找到了)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值