蓝色大肥鱼

这个页面演示如何在 MDX 里直接使用 TypeScript 泛型 风格的类型注解与组件 props。

import Button from “@components/atoms/action/Button.svelte”; import Chips from “@components/atoms/action/Chips.svelte”; import Card from “@components/atoms/display/Card.svelte”; import AccentBar from “@components/atoms/display/AccentBar.svelte”; import Badge from “@components/atoms/display/Badge.svelte”; import Divider from “@components/atoms/display/Divider.svelte”; import Skeleton from “@components/atoms/display/Skeleton.svelte”; import LoadingIndicator from “@components/atoms/feedback/LoadingIndicator.svelte”; import ProgressIndicator from “@components/atoms/feedback/ProgressIndicator.svelte”; import TextField from “@components/atoms/input/TextField.svelte”; import Switch from “@components/atoms/selection/Switch.svelte”; import Checkbox from “@components/atoms/selection/Checkbox.svelte”; import SegmentedButton from “@components/atoms/selection/SegmentedButton.svelte”; import Slider from “@components/atoms/selection/Slider.svelte”;

export const authorInfo = { framework: “Astro 7”, ui: “Svelte 5”, tokens: “M3E 设计令牌”, architecture: “群岛架构” };

export const showcaseItems = [ { name: “原子组件嵌入”, desc: “在文章正文里直接引入并渲染 60+ 个 M3E 原子与分子组件” }, { name: “Svelte 5 交互岛”, desc: “通过 client 选择性注水，杜绝任何多余的 JavaScript 开销” }, { name: “JSX 表达式”, desc: “原生 JavaScript 变量、数据映射与条件渲染” }, { name: “扩展管线”, desc: “Mermaid、KaTeX、提示块与 Expressive Code 的统一 SSOT 编译” } ];

export const filterChipOptions = [ { value: “all”, label: “全部组件” }, { value: “display”, label: “展示类原子” }, { value: “feedback”, label: “反馈类” }, { value: “action”, label: “交互类” } ];

export const segmentedOptions = [ { value: “linear”, label: “线性” }, { value: “circular”, label: “环形” }, { value: “morph”, label: “形变” } ];

6. Markdown 扩展兼容性#

Shirone 的 SSOT 统一插件管线与全部 Markdown 扩展保持完全兼容：

6.1 GitHub 仓库卡片#

saicaca/fuwari

6.2 Mermaid 架构图#

flowchart TD
    MDX[MDX 源文件] --> Compiler["@astrojs/mdx 编译器"]
    Compiler --> Plugins["Remark / Rehype SSOT 管线"]
    Plugins --> Islands["Svelte 5 交互岛"]
    Islands --> Swup["Swup 客户端导航外壳"]
    Swup --> Screen["M3E 表现力文章视图"]

6.3 数学表达式（LaTeX / KaTeX）#

行内公式：质能等价 $E = mc^2$ 与高斯积分 $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$。

块级公式：

$$\mathcal{L}_{M3E} = \sum_{i=1}^{N} \left( \text{Token}_i \cdot \text{ContrastRatio} \right) + \lambda \|\text{MotionElegance}\|$$

---