Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮

准备的资源：

• highlight.js ： 实现代码高亮，通过npm install highlight.js -D安装

• vue-markdown-loader：解析md文件的必备loader，通过npm install vue-markdown-loader -D安装

下面我们分两个场景来说明一下md文件的解析

Webpack

1. 在项目根目录下创建build/webpack.config.js

   // 在webpack.config.js中添加规则
   {
   	test: /\.md$/,
     loader: 'vue-markdown-loader',
   }
   

2. 在main.js中配置样式文件

   // main.js
   import hljs from 'highlight.js';
   import 'highlight.js/styles/atom-one-light.css';
   

Vue-Cli

1. 在项目根目录下创建vue.config.js

   // 在vue.config.js中添加
   // webpack配置
   chainWebpack: (config) => {
     config.module
       .rule('markdown')
       .test(/\.md$/)
       .use('vue-loader')
       .loader('vue-loader')
       .end()
       .use('vue-markdown-loader')
       .loader('vue-markdown-loader/lib/markdown-compiler')
       .options({
       preset: 'default',
       breaks: true,
       raw: true,
       typographer: true,
     })
   },
   

2. 在main.js中配置样式文件

   // main.js
   import hljs from 'highlight.js';
   import 'highlight.js/styles/atom-one-light.css';
   

最终效果

最后喜欢我的小伙伴也可以通过关注公众号“剑指大前端”，或者扫描下方二维码联系到我，进行经验交流和分享，同时我也会定期分享一些大前端干货，让我们的开发从此不迷路。

关注后，回复“webpack”，即可获取最新webpack讲解教学视频哦 🙂🙂🙂