使用mavon-editor做编辑器时,发现代码并不高亮,打开控制台一看,原来是相关的资源请求了cdn。
虽然作者已经说明了本地加载的配置(https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/no-cnd.md),但是没有顺利的配好copy-webpack-plugin。
现解决了此问题,下面将进行说明:
- 复制项目根目录/node_modules/mavon-editor/dist中的所有文件至根目录/public/md(新建文件夹)下
- 在使用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