vue中md文件转html

<template>
  <div class="markdown-body" v-html="htmlStr"/>
</template>

<script>

import mdStr from 'raw-loader!../../../../xzd/xys.md'


let MarkdownIt = require('markdown-it')
let md = new MarkdownIt();
export default {
  name: '',
  data() {
    return {
      htmlStr:'',
    }
  },
  mounted() {
    this.htmlStr= md.render(mdStr);
  },
  methods:{
  }
}
</script>

<style lang="scss">
@import 'github-markdown-css';

/*//自己也可以再调整调整 (贡献一版 我们调整的一版样式)*/
.markdown-body1 {
  padding: 20px;
  min-width: 200px;
  max-width: 900px;
  font-size: 12px;
  h2 {
    font-size: 18px;
    margin: 1em 0 15px;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
  }
  h3 {
    font-size: 14px;
    margin: 22px 0 16px;
  }
  h4 {
    font-size: 13px;
    margin: 20px 0 16px;
  }
  h5 {
    font-size: 12px;
    margin: 16px 0 16px;
    font-weight: 700;
  }
  p {
    font-size: 12px;
    line-height: 24px;
    color: #666666;
    margin-top: 0px;
    margin: 8px 0;
    margin: 14px 0 14px;
  }
  pre {
    background-color: #eee;
    margin-bottom: 8px;
    margin-top: 8px;
    margin: 12px 0 12px;
  }
  blockquote {
    margin-bottom: 8px;
    margin-top: 8px;
    margin: 14px 0 14px;
    background-color: #eee;
    padding: 16px 16px;
  }
  tr {
    background-color: #f5f5f5;
  }
  code {
    background-color: #eee;
  }
  ul,
  ol,
  li {
    list-style: unset;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
    margin-top: 0px;
    margin: 8px 0;
  }
  blockquote {
    border-color: #48b6e2;
  }
  table {
    display: table;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
}

</style>