MDX 集成与 M3E 原子组件

1. Markdown 与 MDX 能力对照#

功能	标准 Markdown（`.md`）	Shirone MDX（`.mdx`）	执行方式
排版与结构	完整支持	完整支持	静态 SSR
代码高亮	行号、边框、折叠	行号、边框、折叠	静态 SSR (Expressive Code)
图表与数学公式	Mermaid, KaTeX	Mermaid, KaTeX	客户端增强
提示块	注释、提示、重要、警告、注意	注释、提示、重要、警告、注意	静态 SSR
M3E 展示原子组件	不支持	直接集成 (`<Card>`, `<Skeleton>`)	纯 SSR（无客户端 JS）
Svelte 5 响应式孤岛	不支持	按需水合 (`<Button>`, `<Switch>`)	通过 `client:visible` 延迟水合
反馈与加载原子组件	不支持	形变动画 (`<LoadingIndicator>`)	通过 `client:visible` 提供响应式交互
动态 JSX 表达式	不支持	原生求值 (`{authorInfo.ui}`)	编译时 / 客户端

2. 动态表达式与数据映射#

MDX 支持在文件顶部用 export const 声明作用域内的常量，可以在行内求值，或映射到模板中：

核心框架: Astro 7
UI 引擎: Svelte 5
设计令牌: M3E 设计令牌
架构模式: 孤岛架构

数组和集合可以动态渲染为网格布局：

1嵌入原子组件

在文章中直接导入并渲染 60 多个 M3E 原子与分子组件

2Svelte 5 孤岛

通过 client:visible 选择性水合，避免不必要的 JavaScript 开销

3JSX 表达式

原生 JavaScript 变量、数据映射和条件渲染

4扩展处理流程

为 Mermaid、KaTeX、提示块和 Expressive Code 提供统一的单一事实来源（SSOT）编译流程

3. M3E 展示与布局基础组件（仅 SSR）#

按照 Shirone 的组件架构（docs/atomic-structure.md），无状态展示组件会输出整洁、支持无障碍访问的语义化 HTML，不携带客户端运行时载荷。

3.1 卡片容器 (`Card.svelte`)#

填充卡片

使用默认容器背景，无层级阴影，适合成组的内容块。

浮起卡片

采用第 1 级容器高度，并叠加交互状态层，增强视觉焦点。

描边卡片

清晰的 1px 描边边界，在中性色表面上划分内容。

3.2 强调条与徽标 (`AccentBar` & `Badge`)#

系统公告

组合 AccentBar 和 Badge，创建醒目的视觉提示

M3E v0.192

3.3 骨架占位符 (`Skeleton.svelte`)#

用于预览布局骨架或制作异步状态原型：

4. 反馈与加载指示器#

Shirone 提供完整呈现 Material 3 Expressive 效果的动效与反馈原子组件：

4.1 形变加载指示器 (`LoadingIndicator.svelte`)#

基于 androidx.graphics.shapes 多边形形变实现，通过弹簧插值提供平滑的七种形状动画：

不确定进度的形状变换

带容器的环形变体

确定进度（68%）

4.2 线性与不确定进度 (`ProgressIndicator.svelte`)#

流水线编译80%

连续双线动画

5. 交互式 Svelte 5 孤岛#

使用 client:visible 声明的组件，会在进入视口时通过 IntersectionObserver 延迟水合：

5.1 按钮类型展示 (`Button.svelte`)#

5.2 筛选标签与分段按钮 (`Chips` & `SegmentedButton`)#

M3E 筛选标签

分段控件

线性环形形变

5.3 开关、复选框与滑块 (`Switch`, `Checkbox`, `Slider`)#

带状态图标的开关

选择复选框

色相光谱滑块

5.4 输入控件 (`TextField.svelte`)#

填充文本框

描边文本框

6. Markdown 扩展兼容性#

Shirone 以单一事实来源（SSOT）为基础的 unified 插件流程，完整兼容所有 Markdown 扩展：

6.1 GitHub 仓库卡片#

saicacafuwari

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 Expressive 文章视图"]

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}\|

7. 总结#

MDX 的原生集成让技术作者能够编写丰富的交互式文档，同时保持 Shirone 快速的静态页面性能。所有组件均遵循 Material 3 Expressive 令牌设计系统，确保一致性、无障碍访问和视觉协调。

蛋壳宇宙

MDX 集成与 M3E 原子组件

1. Markdown 与 MDX 能力对照#

2. 动态表达式与数据映射#

3. M3E 展示与布局基础组件（仅 SSR）#

3.1 卡片容器 (`Card.svelte`)#

3.2 强调条与徽标 (`AccentBar` & `Badge`)#

3.3 骨架占位符 (`Skeleton.svelte`)#

4. 反馈与加载指示器#

4.1 形变加载指示器 (`LoadingIndicator.svelte`)#

4.2 线性与不确定进度 (`ProgressIndicator.svelte`)#

5. 交互式 Svelte 5 孤岛#

5.1 按钮类型展示 (`Button.svelte`)#

5.2 筛选标签与分段按钮 (`Chips` & `SegmentedButton`)#

5.3 开关、复选框与滑块 (`Switch`, `Checkbox`, `Slider`)#

5.4 输入控件 (`TextField.svelte`)#

6. Markdown 扩展兼容性#

6.1 GitHub 仓库卡片#

6.2 Mermaid 架构图#

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

7. 总结#

继续阅读

换条路线

评论

蛋壳宇宙

MDX 集成与 M3E 原子组件

1. Markdown 与 MDX 能力对照#

2. 动态表达式与数据映射#

3. M3E 展示与布局基础组件（仅 SSR）#

3.1 卡片容器 (Card.svelte)#

3.2 强调条与徽标 (AccentBar & Badge)#

3.3 骨架占位符 (Skeleton.svelte)#

4. 反馈与加载指示器#

4.1 形变加载指示器 (LoadingIndicator.svelte)#

4.2 线性与不确定进度 (ProgressIndicator.svelte)#

5. 交互式 Svelte 5 孤岛#

5.1 按钮类型展示 (Button.svelte)#

5.2 筛选标签与分段按钮 (Chips & SegmentedButton)#

5.3 开关、复选框与滑块 (Switch, Checkbox, Slider)#

5.4 输入控件 (TextField.svelte)#

6. Markdown 扩展兼容性#

6.1 GitHub 仓库卡片#

6.2 Mermaid 架构图#

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

7. 总结#

分享文章

沿着主题读

换条路线

评论

3.1 卡片容器 (`Card.svelte`)#

3.2 强调条与徽标 (`AccentBar` & `Badge`)#

3.3 骨架占位符 (`Skeleton.svelte`)#

4.1 形变加载指示器 (`LoadingIndicator.svelte`)#

4.2 线性与不确定进度 (`ProgressIndicator.svelte`)#

5.1 按钮类型展示 (`Button.svelte`)#

5.2 筛选标签与分段按钮 (`Chips` & `SegmentedButton`)#

5.3 开关、复选框与滑块 (`Switch`, `Checkbox`, `Slider`)#

5.4 输入控件 (`TextField.svelte`)#