使用github-markdown-css样式插件

使用场景

文章正文包括各种数据：段落、标题、列表、链接、图片、视频等资源。

此时就可以用 github-markdown-css来帮我们快速的调整样式

• 使用样式插件前

• 使用样式插件后

使用步骤

• 将 github-markdown-css 样式文件下载到项目中

  • 打开链接，复制全部样式到新建文件自己的项目中

• 在article/index.vue中导入

  import './github-markdown.css'
  

• 在对应的地方，添加类名

  <div class="article-content markdown-body" v-html="article.content"></div>
  

• 注意：如果在.postcsscr.js文件中设置了px转rem相关配置，要再设置不要转换样式文件中的字号

  'postcss-pxtorem': {
        rootValue ({ file }) {
          return file.indexOf('vant') !== -1 ? 37.5 : 75
        },
        propList: ['*'],
        // 配置不要转换样式文件中的字号
        exclude: 'github-markdown'
      }