跳到主要内容

Definition Lists 定义列表推荐

安装​

remark-definition-list 插件 Github地址：https://github.com/wataru-chocola/remark-definition-list

npm install remark-definition-list
shell

配置​

修改 docusaurus.config.ts，添加配置内容。

import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';

export default {
    // ...
    markdown: {
        remarkRehypeOptions: {
            handlers: {
              ...defListHastHandlers
            }
        }
    },
    presets: [
        [
            '@docusaurus/preset-classic',
            {
                docs: {
                    remarkPlugins: [
                      remarkDefinitionList,
                    ],
                }
            },
        ],
    ],
};

ts

定义样式

src/css/custom.css
dl {
    background-color: rgba(231, 222, 246, 0.2);
    border: solid 1px rgba(40, 5, 130, 0.5);
    border-radius: 5px;
    padding: 10px;
}

dl dt {
    font-weight: bold;
}

dl dt::before {
    content: "def";
    font-weight: normal;
    font-family: KaTeX_Math;
    color: #00a9ff;
    padding-right: 15px;
}
css

使用​

Apple
: Pomaceous fruit of plants of the genus Malus in the family **Rosaceae**.
markdown
Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae. 
距离公式（Distance Formula）
: 两点$P_1 = (x_1,y_1), P_2 = (x_2,y_2)$之间的距离表示为 $d(P_1,P_2)$。则 $$d(P_1,P_2) = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$
markdown
距离公式（Distance Formula）
两点P1=(x1,y1),P2=(x2,y2)P_1 = (x_1,y_1), P_2 = (x_2,y_2)之间的距离表示为 d(P1,P2)d(P_1,P_2)。则 d(P1,P2)=(x2−x1)2+(y2−y1)2d(P_1,P_2) = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}
  • 支持Markdown语法
  • 支持Katex
  • 支持HTML
  • 块级内容不能够很好的支持如代码块，多行公式等