MDX 集成与 M3E 原子组件

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

功能	标准 Markdown（`.md`）	Shirone MDX（`.mdx`）	执行模式
排版与结构	完全支持	完全支持	静态 SSR
代码高亮	行号、框架、可折叠	行号、框架、可折叠	静态 SSR（Expressive Code）
图表与数学	Mermaid、KaTeX	Mermaid、KaTeX	客户端增强
提示块	Note、Tip、Important、Warning、Caution	Note、Tip、Important、Warning、Caution	静态 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 Design Tokens
架构模式：Islands Architecture

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

1Atomic Component Embedding

Directly import and render 60+ M3E atoms and molecules in article content

2Svelte 5 Islands

Selective hydration via client:visible ensures zero unnecessary JavaScript overhead

3JSX Expressions

Native JavaScript variables, data mappings, and conditional rendering

4Extension Pipeline

Unified SSOT compilation for Mermaid, KaTeX, Admonitions, and Expressive Code

3. M3E 展示与布局原语（仅 SSR）#

根据 Shirone 的组件架构（docs/atomic-structure.md），无状态的展示组件输出干净、无障碍的语义化 HTML，且没有客户端运行时负载。

3.1 卡片容器（`Card.svelte`）#

Filled Card

Default container background with no elevation shadow. Ideal for grouped content blocks.

Elevated Card

Level 1 container elevation with interactive state layering for heightened visual focus.

Outlined Card

A crisp 1px outline boundary providing clean separation on neutral surfaces.

3.2 强调条与徽章（`AccentBar` 与 `Badge`）#

System Announcement

Combine AccentBar with Badge to build prominent visual callouts

M3E v0.192

3.3 骨架占位符（`Skeleton.svelte`）#

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

4. 反馈与加载指示器#

Shirone 具备完整保真度的 Material 3 Expressive 动效与反馈原子：

4.1 变形加载指示器（`LoadingIndicator.svelte`）#

使用 androidx.graphics.shapes 多边形变形实现，提供平滑的弹簧插值 7 形状动画：

Indeterminate Shape Morph

Contained Circular Variant

Determinate Progress (68%)

4.2 线性与不确定进度（`ProgressIndicator.svelte`）#

Pipeline Compilation80%

Continuous Dual-Line Animation

5. 交互式 Svelte 5 岛屿#

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

5.1 按钮矩阵（`Button.svelte`）#

5.2 筛选标签与分段按钮（`Chips` 与 `SegmentedButton`）#

M3E Filter Chips

Segmented Control

Linear Circular Morphing

5.3 开关、复选框与滑块（`Switch`、`Checkbox`、`Slider`）#

Switch with Status Icons

Selection Checkboxes

Hue Spectrum Slider

5.4 输入控件（`TextField.svelte`）#

Filled Text Field

Outlined Text Field

6. Markdown 扩展兼容性#

Shirone 的 SSOT 统一插件管道保持与所有 Markdown 扩展的完全兼容：

6.1 GitHub 仓库卡片#

saicacafuwari

6.2 Mermaid 架构图#

flowchart TD
    MDX[MDX Source Entry] --> Compiler["@astrojs/mdx Compiler"]
    Compiler --> Plugins["Remark / Rehype SSOT Pipeline"]
    Plugins --> Islands["Svelte 5 Interactive Islands"]
    Islands --> Swup["Swup Client Navigation Shell"]
    Swup --> Screen["M3E Expressive Article View"]

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 令牌设计系统，确保一致性、无障碍性和视觉和谐。

Shirone

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. 总结#

继续阅读

换条路线

评论

Shirone

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`）#