官方解决方式
官方的解决方式获取不到highlight代码段的css,而且没有配置公共路径,导入的资源也过多
只能获取到node_modules/mavon-editor/dist/highlightjs,但是获取不到node_modules/mavon-editor/dist/highlightjs/style,导致缺少代码段的css,手动import导入
个人修改
在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')
}
])
// ...
]
}
};
在需要使用mavon-editor的组件中。代码片段使用github,其余主题替换相应位置
注意:部署后公共路径的修改,vue.config.js的publicPath不会作用在这里
<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';
}
}
};
},