字体颜色组件（Color）

Markdown中是不支持设置字体颜色的，如果我们想要在Markdown中设置文字的颜色，一般来说只能使用HTML标签来实现。如下：

<span style={{color:'red'}}>十步杀一人，千里不留行</span>

tsx

十步杀一人，千里不留行

现在我们定义一个Color组件，来实现设置字体颜色的功能。

组件定义

src/components/Color/index.tsx

import React from 'react';

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

tsx

使用方式如下：

<Color c="red">十步杀一人，千里不留行</Color>

mdx

十步杀一人，千里不留行

这样使用依然有些不方便，因为需要设置组件的颜色参数。我们可以将经常使用的颜色定义为单独的组件。

常用颜色组件定义

红色

import React from 'react';
import Color from '@site/src/components/Color';

export default function Red({children}) {
    return (
        <Color c="red">
          {children}
        </Color>
    );
}

tsx

<Red>十步杀一人，千里不留行</Red>

mdx

十步杀一人，千里不留行

蓝色

import React from 'react';
import Color from '@site/src/components/Color';

export default function Blue({children}) {
    return (
        <Color c="blue">
          {children}
        </Color>
    );
}

tsx

<Blue>十步杀一人，千里不留行</Blue>

mdx

十步杀一人，千里不留行