前端解析md文件

在webpack5官方推荐使用markdown-loader

1.安装github-markdown-css 和 markdown-loader，html-loader

npm install github-markdown-css markdown-loader html-loader -D

2.在webpack中配置markdown-loader和html-loader

module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "markdown-loader",
            options: {
              // Pass options to marked
              // See https://marked.js.org/using_advanced#options
            },
          },
        ],
      },
    ],
  }

3.在文件中引入

react的使用，使用dangerouslySetInnerHTML指令

import React from 'react';
import refMd from '../../assets/md/test.md'

import 'github-markdown-css';
function List(props){
    const rawHtml = {
        __html: refMd
    };
    return (
        <>
            <h1>列表页</h1>     
            <div className="markdown-body" dangerouslySetInnerHTML={rawHtml}></div>
        </>        
    )
}

export default List;

vue的使用

<template>
  <div v-html="md"></div>
</template>

<script>
import demo from '../../assets/md/test.md';
export default {
  name: 'List',
  data () {
    return {
      md: demo
    };
  },
  methods: {}
};
</script>