Docusaurus,一款基于React的文档框架, 博客文章支持Docusaurus Markdown功能,如MDX。
在mdx
内使用组件, 可以将组件写在文件内部, 当然也可以写在components
中, 然后导入
以上两种都可以作为解决方案, 不过有更好的解决方案: 全局组件
- 创建
/src/theme/MDXComponents.js
文件 (swizzle 弹出时必须指定组件, 只能手动创建了), 以Highlight为例:
import React from 'react';
// 导入原映射
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/blog_components/Highlight';
export default {
// 复用默认的映射
...MDXComponents,
// 把 "highlight" 标签映射到我们的 <Highlight /> 组件!
// `Highlight` 会收到在 MDX 中被传递给 `highlight` 的所有 props
highlight: Highlight,
};
效果:
我可以随时随地用 Docusaurus 绿了!