react中实现markdown文件读取展示

最近自己在做一个纯前端的的静态博客网站，需要将markdown文件的内容转换为html展示到页面上，本文记录利用 remark-loader 帮助我们处理md 文件，并将内容转为html展示。

借助webpack的remark-loader解析文件,其它loader亦可以（markdown-loader等），webpack 帮你处理转换过程.

主要 webpack 配置如下：

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

配置完成后即可在代码中直接使用 import xxx from "your.md" 引入 md 文件；

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

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

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

将文件内容转换为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的内容字符串。

在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;

umi 实践问题

umi中通过webpackChain使用时需要关闭webpack5,否则loader会报错：this.getOptions is not a function

不一定非得使用loader处理md文件，也可以使用marked等三方库处理转换

参考链接

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

MDX 进阶，在 md 文件中解析 React 组件

因为我这里是涉及到前端相关的技术文章，有时候需要结合代码来进行分析说明，上面的操作只能简单的展示 md 内容，遇到代码相关的内容只能按文本展示出来，不是我们想要的效果，我们需要的是遇到 React 代码时，按照代码处理展示相关的内容，这里需要用的 MDX 相关的东西。

markdown与JSX混合使用参考：使用 MDX 在 md 文件中解析React组件
​