mavon-editor closes cdn local loading to achieve code highlighting

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.
cdn request
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:

  1. Copy all files in the project root directory /node_modules/mavon-editor/dist to the root directory /public/md (new folder)
    Table of contents
  2. 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-linkattributes 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:
mistake
find github-markdown.min.css at this time, and delete the last sentence.
insert image description here

References:
https://www.pipipi.net/questions/13803.html
https://blog.csdn.net/weixin_50823456/article/details/120367087

Guess you like

Origin blog.csdn.net/Zhou_ZiZi/article/details/122526902