Published on

MDX 让 Markdown 步入组件时代

MDX 让 Markdown 步入组件时代

前言

在 MDX 出现之前，将 JSX 与 Markdown 混合书写时，Markdown 的优势就不存在了。 通常采是用基于模板字符串的方式，因此就需要大量的转义和繁琐的语法。

MDX 试图让书写 Markdown 和 JSX 更简单、更具有表现力。当你将组件 （甚至可以是动态的或需要加载数据的组件）与 Markdown 混合书写时，你将写出更有趣的内容。

MDX 是什么

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。

前提条件

您应该熟悉 markdown 语法和 JavaScript 语法 (特别是 JSX)。

MDX 示例

比如官网的一个例子，如下代码

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

展示效果

image.png

如何使用

在 create-react-app 中 只需要安装 @mdx-js/loader， create-react-app@5 支持自定义 loader，代码示例如下

src/App.jsx

/* eslint-disable import/no-webpack-loader-syntax */
import Content from '!@mdx-js/loader!./content.mdx'

export default function App() {
  return <Content />
}

src/content.mdx

# Hello, world!

This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX!

如果是 webpack 项目只需要加一个 @mdx-js/loader 就可以支持

module.exports = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // `babel-loader` is optional:
          { loader: 'babel-loader', options: {} },
          {
            loader: '@mdx-js/loader',
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              /* jsxImportSource: …, otherOptions… */
            },
          },
        ],
      },
    ],
  },
}

插件支持

MDX 也支持插件配置，也就是原先的 markdown 插件

比如要让 markdown 支持表格和 checkboxList ，可以使用 remark-gfm 插件

比如要让 markdown 支持数学公式 可以使用 rehype-katex 插件

在的 option 可以传入参数，代码如下：