Official solution
The official solution cannot get the css of the highlight code segment, and there is no public path configured, and too many imported resources can
only get node_modules/mavon-editor/dist/highlightjs, but not node_modules/mavon-editor/dist /highlightjs/style, resulting in missing css code snippets, manual import
Personal modification
In vue.config.js
module.exports = {
configureWebpack: {
plugins: [
// ...
new CopyWebpackPlugin([
{
from: 'node_modules/mavon-editor/dist/highlightjs/highlight.min.js',
to: path.resolve(__dirname, 'dist/markdown/highlightjs') // 插件将会把文件导出在dist/markdown/xxx
},
{
from: 'node_modules/mavon-editor/dist/markdown',
to: path.resolve(__dirname, 'dist/markdown/markdown')
},
{
from: 'node_modules/mavon-editor/dist/katex',
to: path.resolve(__dirname, 'dist/markdown/katex')
}
])
// ...
]
}
};
In the components that need to use mavon-editor. The code snippet uses github, and the rest of the topics replace the corresponding positions
Note: Modification of the public path after deployment, the publicPath of vue.config.js will not work here
<mavon-editor
v-model="blog.content"
:subfield="false"
codeStyle="github"
:externalLink="externalLink"
:ishljs="true"
/>
// 自行导入样式
import '@/assets/markdown/github.css';
let publicPath = '';
if (process.env.NODE_ENV === 'production') {
publicPath = '/public';
}
export default {
name: 'Blog',
data() {
return {
blog: {
},
code_style: 'github',
externalLink: {
markdown_css: function() {
// 这是你的markdown css文件路径
return publicPath + '/markdown/markdown/github-markdown.min.css';
},
hljs_js: function() {
// 这是你的hljs文件路径
return publicPath + '/markdown/highlightjs/highlight.min.js';
},
hljs_css: false,
katex_css: function() {
// 这是你的katex配色方案路径路径
return publicPath + '/markdown/katex/katex.min.css';
},
katex_js: function() {
// 这是你的katex.js路径
return publicPath + '/markdown/katex/katex.min.js';
}
}
};
},