数学定理组件（Theorem）

数学定义用于在文档中插入数学定理。

组件定义

src/components/Theorem/index.tsx

import React from 'react';
import MDXContent from '@theme/MDXContent';
import styles from './style.module.css'

export default function Definition({title, seqNo, children}) {
	return (<div className={styles.theorem}>
		<MDXContent>
			<div className={styles.header}>
				<span className={styles.keyword}>THEOREM {seqNo && ` ${seqNo}`}</span>
				{title ? <span className={styles.title}>{title}</span> : ''}
			</div>
			<p>{children}</p>
		</MDXContent>
	</div>);
}

tsx

src/components/Theorem/style.module.css

.theorem {
    border-left: 4px solid rgba(72, 121, 246, 0.5);
    background: rgba(72, 121, 246, 0.1);
    border-radius: 5px;
    box-shadow: var(--ifm-blockquote-shadow);
    color: var(--ifm-blockquote-color);
    font-size: var(--ifm-blockquote-font-size);
    margin: 0 0 var(--ifm-spacing-vertical);
    padding: 5px var(--ifm-blockquote-padding-horizontal);
}

.header {
    margin-bottom: 10px;
}

.keyword {
    font-weight: bold;
    color: #1fa588;
    margin-right: 10px;
}

.title {
    color: dimgray;
    font-weight: bold;
}

tsx

这里与数学定义的组件仅仅是关键字的差异，样式与数学定义组件一致。

使用示例

<Theorem title="距离公式（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}
$$

</Theorem>

markdown

THEOREM 距离公式（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}$$

注意

title中不支持Markdown内容