When using mavon-editor as an editor, I found that the code is not highlighted. When I opened the console, it turned out that the relevant resources requested the CDN.
Although the author has explained the local loading configuration (https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/no-cnd.md), but the copy-webpack-plugin was not successfully configured.
This issue is now resolved, as explained below:
- Copy all files in the project root directory /node_modules/mavon-editor/dist to the root directory /public/md (new folder)
- In the vue file data using the mavon-editor component, add the following configuration
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',
}
<mavon-editor>
3. Add :external-link
attributes to the tag
<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. Introduce css separately at the bottom of the file
<style scoped>
@import '/md/markdown/github-markdown.min.css';
</style>
5. Open the interface at this time, and the code can be highlighted normally, but there is still an error in the console:
find github-markdown.min.css at this time, and delete the last sentence.
References:
https://www.pipipi.net/questions/13803.html
https://blog.csdn.net/weixin_50823456/article/details/120367087