- Published on
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" />
展示效果
如何使用
在 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 可以传入参数,代码如下: