块组件（Block）

块组件用于在文档中标记处一块高亮区域，可用于表示文档中的重要内容。

组件定义

src/components/Block/index.tsx

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

export default function Block({children, title}) {
    return (<div className={styles.mathnotesBlock}>
        <MDXContent>
            {title && <div className={styles.title}>{title}</div>}
            {children}
        </MDXContent>
    </div>);
}

tsx

src/components/Block/style.module.css

.mathnotesBlock {
    border: 1px solid #4E9EEF;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: rgba(189, 214, 238, 0.25);
}

.mathnotesBlock p:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 20px;
    text-align: center;
}

tsx

使用方式

<Block>
日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。
</Block>

markdown

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

效果展示

线性代数的中心是两个运算--都是针对向量。我们把向量相加得到 $\bm{v} + \bm{w}$，我们用数字 $c$ 与 $d$ 乘向量得到 $c\bm{v}$ 与 $d\bm{w}$，组合这两种运算($c\bm{v}$ 加到 $d\bm{w}$)得到线性组合 $c\bm{v}+d\bm{w}$。

线性组合

$$c\bm{v}+d\bm{w} = c \begin{bmatrix} 1 \\ 1 \end{bmatrix} + d \begin{bmatrix} 2 \\ 3 \end{bmatrix} = \begin{bmatrix} c + 2d \\ c + 3d \end{bmatrix}$$

向量$c\bm{v}$落在一条直线，当$\bm{w}$不在这条线上时，线性组合$c\bm{v}+d\bm{w}$会充满整个二维平面。

小结

其实也可以通过提供参数来定义背景颜色和边框颜色，但是不建议这样做，因为我们定义组件的目的就是为了使用简便。如果对颜色有要求可以确定几种方案，然后分别定义为组件，这样使用起来会比较方便。