mavon-editor关闭cdn本地加载实现代码高亮

使用mavon-editor做编辑器时,发现代码并不高亮,打开控制台一看,原来是相关的资源请求了cdn。
cdn请求
虽然作者已经说明了本地加载的配置(https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/no-cnd.md),但是没有顺利的配好copy-webpack-plugin。
现解决了此问题,下面将进行说明:

  1. 复制项目根目录/node_modules/mavon-editor/dist中的所有文件至根目录/public/md(新建文件夹)下
    目录
  2. 在使用mavon-editor组件的vue文件data中,添加如下配置
externalLink: {
    
    
    markdown_css: false,
    hljs_js: () => '/md/highlightjs/highlight.min.js',
    hljs_css: (css) => '/md/highlightjs/styles/' + css + '.min.css',
    hljs_lang: (lang) => '/md/highlightjs/languages/' + lang + '.min.js',
    katex_css: () => '/md/katex/katex.min.css',
    katex_js: () => '/md/katex/katex.min.js',
}

3.在 <mavon-editor> 标签中添加:external-link属性

<mavon-editor
            ref="md"
            placeholder="请输入文章内容..."
            :boxShadow="false"
            style="z-index: 1; border: 1px solid #d9d9d9; height: 50vh"
            v-model="content"
            :toolbars="toolbars"
            :external-link="externalLink"
          />

4.在文件最下方单独引入css

<style scoped>
@import '/md/markdown/github-markdown.min.css';
</style>

5.此时打开界面,代码就可以正常高亮了,但是控制台还存在一条错误:
错误
此时找到github-markdown.min.css,删除掉最后一句即可。
在这里插入图片描述

参考文献:
https://www.pipipi.net/questions/13803.html
https://blog.csdn.net/weixin_50823456/article/details/120367087

猜你喜欢

转载自blog.csdn.net/Zhou_ZiZi/article/details/122526902
今日推荐