自定义颜色【自定义插件】

首先自定义颜色组件,比如在src/components/MDX/Color/index.js

import React from 'react';

export default function Color({ children, c = '#000' }) {
    return <span style={{ color: c }}>{children}</span>;
}
```

然后注册为全局组件

在目录下src/theme新建文件MDXComponents.js

/**
 * 注册MDX全局组件
 */
import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Color from '../components/MDX/Color';

export default {
    // Re-use the default mapping
    ...MDXComponents,
    Color
};

最后重启服务，既可以使用

<Color c="green">网站使用开源工具[Docusaurus](https://docusaurus.io/)构建！</Color>

参考文章：https://jdocs.wiki/docusaurus-site/mdx/register-mdx-components

神评论