markDonw文件转html并使用

vue中如何将markdown文件转换为html并展示？

• 本地markdown文件

  1. 使用typora导出HTML格式

  2. 将导出的html文件和对应的图片文件添加到项目public下，修改图片路径

  3. 将html文件修改为js文件，并导出html片段

     // htmlTemplate.js
     const htmlTemplte = `
        html文件内容
     `
     export default htmlTemplate
     

  4. 在需要使用的文件中引入，通过v-html渲染，此时还需要再添加样式

  5. 在渲染的标签上添加 class="markdown-body"，下载样式markdown.min.css到本地

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

  6. 在当前vue页面中引入

     <style>
     @import '../assets/css/markdown.css';
     </style>
     

• 后台返回markdown文件

  1. 使用markdown-it处理markdown格式数据

  2. 安装npm install markdown-it --save

  3. 在对应的页面中使用

     <script>
     import MarkdownIt from 'markdown-it'
     const md = new MarkdownIt()
     
     export default {
       name: 'Post',
       metaInfo: {
         title: 'Post',
       },
       methods: {
         mdToHtml (markdown) {
           return md.render(markdown)
         }
       }
     }
     </script>
     

  4. 在使用v-html渲染的时候使用mdToHtml方法

     <div class="col-lg-8 col-md-10 mx-auto" v-html="mdToHtml($page.post.content)"></div>