跳到主要内容

添加Remark Github Alert插件

参考文档：MDX Plugins

本文使用的是：remark-github-alerts
Github地址：https://github.com/hyoban/remark-github-alerts

也可以使用：remark-github-blockquote-alert
Github地址：https://github.com/jaywcjlove/remark-github-blockquote-alert

安装插件​

npm install remark-github-alerts --save
shell

配置​

1、修改docusaurus.config.js配置文件，加入remark-github-alerts插件。

docusaurus.config.js
import remarkGithubAlerts from 'remark-github-alerts';

export default {
    // ...
    presets: [
        [
            '@docusaurus/preset-classic',
            {
                docs: {
                    remarkPlugins: [
                        remarkGithubAlerts,
                    ],
                },
                pages: {
                    remarkPlugins: [remarkGithubAlerts],
                },
                blog: {
                    remarkPlugins: [
                        remarkGithubAlerts,
                    ],
                    // ...
                },
            },
        ],
    ],
};

ts

2、引入样式：修改src/css/custom.css导入样式文件

@import "remark-github-alerts/styles/github-base.css";
@import "remark-github-alerts/styles/github-colors-light.css";

...

css

还有 github-colors-dark-class.css和github-colors-dark-media.css可以选择。

使用方式​

使用方式与Github中的Alerts使用方式一致。

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
markdown

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

对比Docusaurus原生Admonition​

备注

Useful information that users should know, even when skimming content.

提示

Helpful advice for doing things better or more easily.

important

Key information users need to know to achieve their goal.

注意

Urgent info that needs immediate user attention to avoid problems.

警告

Advises about risks or negative outcomes of certain actions.

将Github Alert转为Admonition​

使用插件remark-github-admonitions-to-directives可以将Github Alert转为Admonition。
插件地址：https://github.com/incentro-dc/remark-github-admonitions-to-directives

使用方式请参考项目中的README.MD文档说明。本文中不再赘述。

参考资料​