MDX 集成与 M3E 原子化组件

1. Markdown 与 MDX 功能对比矩阵#

功能特性	标准 Markdown	Shirone MDX	执行模式
排版与基础结构	完整支持	完整支持	静态 SSR
代码块高亮	行号、边框、折叠	行号、边框、折叠	Expressive Code 静态 SSR
图表与数学公式	Mermaid, KaTeX	Mermaid, KaTeX	客户端动态增强
提示块	Note, Tip, Important, Warning, Caution	Note, Tip, Important, Warning, Caution	静态 SSR
M3E 展示原子组件	不支持	直接集成	纯 SSR
Svelte 5 响应式孤岛	不支持	按需动态水合	`client:visible` 懒加载水合
反馈与加载原子	不支持	形状形变动画	`client:visible` 响应式运行
动态 JSX 表达式	不支持	原生计算求值	编译期或客户端动态求值

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 统一编译

3. M3E 展示与布局基础组件#

遵循 Shirone 的组件架构，无状态展示组件直接输出干净、无障碍的语义化 HTML，不产生任何客户端运行时载荷。

3.1 卡片容器#

填充卡片

默认容器背景且无阴影，适合分组展示内容块。

抬升卡片

具备一级高度阴影与交互分层，适合提升视觉焦点。

描边卡片

拥有清晰的 1 像素外边框，在中性表面上提供分明边界。

3.2 强调条与徽章#

系统公告

将 AccentBar 与 Badge 结合使用可构建醒目的视觉提示

M3E v0.192

3.3 骨架屏占位#

用于预览布局骨架或模拟异步加载状态：

4. 反馈与加载指示器#

Shirone 具备高还原度的 Material 3 Expressive 动效与反馈原子：

4.1 多边形形变加载器#

基于多边形平滑插值算法实现，带来平滑的 7 形状弹簧插值过渡动画：

不定态多边形形变

环形包裹容器变体

确定性进度展示 68%

4.2 线性与不定态进度条#

管道编译进度80%

连续双线扫描动效

5. 交互式 Svelte 5 孤岛#

声明为 client:visible 的组件在进入可视视口时，会通过 IntersectionObserver 进行懒加载水合：

5.1 按钮矩阵#

5.2 过滤标签与分段按钮#

M3E 过滤标签

分段控制器

线性环形多边形形变

5.3 开关、复选框与滑块#

带状态图标的开关

选择复选框

色相调节滑块

5.4 输入框组件#

填充式文本框

描边式文本框

6. Markdown 扩展兼容性#

Shirone 的统一插件管道完整保留了对所有 Markdown 扩展特性的兼容：

6.1 GitHub 仓库卡片#

saicacafuwari

6.2 Mermaid 架构图#

flowchart TD
    MDX[MDX 源码入口] --> Compiler["@astrojs/mdx 编译器"]
    Compiler --> Plugins["Remark 与 Rehype 处理管道"]
    Plugins --> Islands["Svelte 5 交互式孤岛"]
    Islands --> Swup["Swup 客户端路由 Shell"]
    Swup --> Screen["M3E 表现力文章视图"]

6.3 数学公式排版#

行内公式：质能等价方程 $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 的深度集成使技术创作者能够构建丰富交互的文档与文章，同时保持极佳的静态加载性能。所有组件均遵循 Material 3 Expressive 令牌设计系统，确保全站风格的一致性、无障碍体验与视觉美感。

Shirone

1. Markdown 与 MDX 功能对比矩阵#

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

3. M3E 展示与布局基础组件#

3.1 卡片容器#

3.2 强调条与徽章#

3.3 骨架屏占位#

4. 反馈与加载指示器#

4.1 多边形形变加载器#

4.2 线性与不定态进度条#

5. 交互式 Svelte 5 孤岛#

5.1 按钮矩阵#

5.2 过滤标签与分段按钮#

5.3 开关、复选框与滑块#

5.4 输入框组件#

6. Markdown 扩展兼容性#

6.1 GitHub 仓库卡片#

6.2 Mermaid 架构图#

6.3 数学公式排版#

7. 总结#

继续阅读

换条路线

Shirone

1. Markdown 与 MDX 功能对比矩阵#

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

3. M3E 展示与布局基础组件#

3.1 卡片容器#

3.2 强调条与徽章#

3.3 骨架屏占位#

4. 反馈与加载指示器#

4.1 多边形形变加载器#

4.2 线性与不定态进度条#

5. 交互式 Svelte 5 孤岛#

5.1 按钮矩阵#

5.2 过滤标签与分段按钮#

5.3 开关、复选框与滑块#

5.4 输入框组件#

6. Markdown 扩展兼容性#

6.1 GitHub 仓库卡片#

6.2 Mermaid 架构图#

6.3 数学公式排版#

7. 总结#

分享文章

沿着主题读

换条路线