最近自己在做一个纯前端的的博客，需要将markdown的文件博客内容展示到页面，本文记录如何读取文件内容并将内容转为html展示。

1.借助webpack的remark-loader解析文件

webpack配置如下：

import RemarkHTML from "remark-html";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ],
  },
};

配置后即可在代码中使用import 引入md文件；

注：如果使用了ts，import md from "module.md"会提示无法识别模块，需要增加类型声明：

declare module "*.md" {
  const content: string;
  export default content;
}

如此即可正常解析md文件.

更多remark-loader配置详见: https://webpack.js.org/loaders/remark-loader/#usage

2.将文件内容转换为html

我的需求是将md转换为html,所以完成第一步只能正常应用md内容，无法直接显示，所以我们需要借助remark-loader的plugins帮助我们完成转换，这里我们用到了remark-html插件，配置代码如下：

import RemarkHTML from "remark-html";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ],
  },
};

这样就能直接通过 import md form "module.md"拿到转换为html的内容字符串。

3.在react中展示

代码如下：

import React from "react";
import styles from "./detail.less";
const content = require(`./block.md`);

function BlogDetail (props:any) {
  return <div className={styles.content}>
    <article dangerouslySetInnerHTML={{ __html: content  }}></article>
  </div>;
}

export default BlogDetail;

完成。。。。。。。。。

前端优质资源聚合，由浅入深，由近及远：前端网