MDX全面演示 - 语法与组件解析能力展示
Jee said

MDX全面演示 - 语法与组件解析能力展示

测试用户
Category:
测试
Tags:
MDX插件

1. Markdown语法元素演示

1.1 标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

1.2 段落

这是一个普通段落，用于展示文本的基本排版。段落之间会有适当的间距，确保内容清晰易读。

这是第二个段落，展示段落之间的分隔效果。

1.3 文本强调

粗体文本

斜体文本

粗斜体文本

删除线文本

1.4 代码

行内代码：const hello = "world";

// JavaScript代码示例
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("MDX"));
# Python代码示例
def greet(name):
    return f"Hello, {name}!"

print(greet("MDX"))
<!-- HTML代码示例 -->
<div class="example">
  <p>Hello, MDX!</p>
</div>

1.5 引用块

这是一个基本引用块，用于展示引用的文本内容。

多层引用

这是嵌套的引用块，展示引用的层级结构。

更深层次的引用

1.6 列表

1.6.1 无序列表

  • 列表项 1
  • 列表项 2
    • 嵌套列表项 2.1
    • 嵌套列表项 2.2
  • 列表项 3

1.6.2 有序列表

  1. 第一项
  2. 第二项
    1. 嵌套第一项
    2. 嵌套第二项
  3. 第三项

1.6.3 任务列表

  • 已完成任务
  • 未完成任务
  • 另一个已完成任务
  • 另一个未完成任务

1.7 表格

表头 1表头 2表头 3
单元格 1单元格 2单元格 3
单元格 4单元格 5单元格 6
单元格 7单元格 8单元格 9
左对齐居中对齐右对齐
左文本中文本右文本
更多内容居中内容右侧内容

1.8 水平分隔线

1.9 链接

普通链接

带标题的链接

1.10 图片

示例图片

带标题的图片

1.11 脚注

这是一个带有脚注的句子1。

这是另一个带有脚注的句子2。

1.12 数学公式

行内数学公式：E=mc2E = mc^2

块级数学公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} ddx(∫axf(t)dt)=f(x)\frac{d}{dx} \left( \int_{a}^{x} f(t) dt \right) = f(x) 1+1+1+1+x\sqrt{1 + \sqrt{1 + \sqrt{1 + \sqrt{1 + x}}}} 12+1314−1516×1718÷19\frac{\frac{\frac{1}{2} + \frac{1}{3}}{\frac{1}{4} - \frac{1}{5}}}{\frac{\frac{1}{6} \times \frac{1}{7}}{\frac{1}{8} \div \frac{1}{9}}} ∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} lim⁡x→∞(1+1x)x=e\lim_{x \to \infty} \left( 1 + \frac{1}{x} \right)^x = e (123456789)\begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix} (a+b)2=a2+2ab+b2(a−b)2=a2−2ab+b2(a+b)(a−b)=a2−b2\begin{aligned} (a + b)^2 &= a^2 + 2ab + b^2 \\ (a - b)^2 &= a^2 - 2ab + b^2 \\ (a + b)(a - b) &= a^2 - b^2 \end{aligned} LSM=−14WμνaWaμν−14BμνBμν−14GμνiGiμν+Lˉ iγμDμL+Rˉ iγμDμR+lˉ iγμDμl+qˉ iγμDμq−lˉLYlϕR−qˉLYqϕqR−qˉLYuϕ~uR+h.c.+∣Dμϕ∣2−V(ϕ)\begin{aligned} \mathcal{L}_{\text{SM}} &= -\frac{1}{4} W_{\mu\nu}^a W^{a\mu\nu} -\frac{1}{4} B_{\mu\nu} B^{\mu\nu} -\frac{1}{4} G_{\mu\nu}^i G^{i\mu\nu} \\ &\quad+\bar{L}\,i\gamma^\mu D_\mu L +\bar{R}\,i\gamma^\mu D_\mu R +\bar{l}\,i\gamma^\mu D_\mu l +\bar{q}\,i\gamma^\mu D_\mu q \\ &\quad-\bar{l}_L Y_l \phi R -\bar{q}_L Y_q \phi q_R -\bar{q}_L Y_u \tilde{\phi} u_R +\text{h.c.} \\ &\quad+|D_\mu \phi|^2 - V(\phi) \end{aligned} ζ(s)=2sπs−1sin⁡(πs2)Γ(1−s) ζ(1−s)\zeta(s) = 2^s \pi^{s-1} \sin\left(\frac{\pi s}{2}\right) \Gamma(1-s)\, \zeta(1-s) Γ[ϕc]=S[ϕc]+12∫d4k(2π)4ln⁡(k2+m2−Σ(k2)k2+m2)+∑n≥31n!∫d4x1⋯d4xnΓ(n)(x1,…,xn)ϕc(x1)⋯ϕc(xn)\Gamma[\phi_c] = S[\phi_c] + \frac{1}{2}\int\frac{d^4k}{(2\pi)^4}\ln\left(\frac{k^2 + m^2 - \Sigma(k^2)}{k^2 + m^2}\right) + \sum_{n\geq3}\frac{1}{n!}\int d^4x_1\cdots d^4x_n \Gamma^{(n)}(x_1,\dots,x_n)\phi_c(x_1)\cdots\phi_c(x_n) LSM=−14WμνaWaμν−14BμνBμν−14GμνiGiμν+∑fψˉfiγμ(∂μ−igstiGμi−igTaWμa−ig′YfBμ)ψf−∑f,f′ψˉfL(Yff′dϕdfR′+Yff′uϕ~ufR′+Yff′lϕlfR′)+h.c.+∣(∂μ−igTaWμa−ig′YϕBμ)ϕ∣2−μ2ϕ†ϕ−λ(ϕ†ϕ)2−12ξ(DμWμa)2−12ξ′(∂μBμ)2−12ξs(DμGμi)2+cˉa(−∂μDμab−igfabcWμb∂μ)cb+cˉ′∂2c′+cˉi(−∂μDμij−igsfijkGμj∂μ)ck\begin{aligned} \mathcal{L}_{\text{SM}} &= -\frac{1}{4} W_{\mu\nu}^a W^{a\mu\nu} -\frac{1}{4} B_{\mu\nu} B^{\mu\nu} -\frac{1}{4} G_{\mu\nu}^i G^{i\mu\nu} \\ &\quad+\sum_{f}\bar{\psi}_f i\gamma^\mu\left(\partial_\mu -ig_s t^i G_\mu^i -ig T^a W_\mu^a -ig' Y_f B_\mu\right)\psi_f \\ &\quad-\sum_{f,f'}\bar{\psi}_{f_L}\left(Y_{ff'}^{d}\phi d_{f'_R} +Y_{ff'}^{u}\tilde{\phi} u_{f'_R} +Y_{ff'}^{l}\phi l_{f'_R}\right)+\text{h.c.} \\ &\quad+\left|(\partial_\mu -ig T^a W_\mu^a -ig' Y_\phi B_\mu)\phi\right|^2 -\mu^2\phi^\dagger\phi -\lambda(\phi^\dagger\phi)^2 \\ &\quad-\frac{1}{2\xi}(D^\mu W_\mu^a)^2 -\frac{1}{2\xi'}(\partial^\mu B_\mu)^2 -\frac{1}{2\xi_s}(D^\mu G_\mu^i)^2 \\ &\quad+\bar{c}^a\left(-\partial^\mu D_{\mu}^{ab} -ig f^{abc} W_{\mu}^b \partial^\mu\right)c^b +\bar{c}'\partial^2 c' +\bar{c}^i\left(-\partial^\mu D_{\mu}^{ij} -ig_s f^{ijk} G_{\mu}^j \partial^\mu\right)c^k \end{aligned} Rμν−12gμνR+Λgμν=8πGc4TμνRμν=∂λΓμνλ−∂νΓμλλ+ΓμνλΓλρρ−ΓμλρΓνρλΓμνλ=12gλρ(∂μgρν+∂νgρμ−∂ρgμν)R=gμνRμν\begin{aligned} R_{\mu\nu} - \frac{1}{2}g_{\mu\nu}R + \Lambda g_{\mu\nu} &= \frac{8\pi G}{c^4}T_{\mu\nu} \\ R_{\mu\nu} &= \partial_\lambda \Gamma^\lambda_{\mu\nu} -\partial_\nu \Gamma^\lambda_{\mu\lambda} +\Gamma^\lambda_{\mu\nu}\Gamma^\rho_{\lambda\rho} -\Gamma^\rho_{\mu\lambda}\Gamma^\lambda_{\nu\rho} \\ \Gamma^\lambda_{\mu\nu} &= \frac{1}{2}g^{\lambda\rho}\left( \partial_\mu g_{\rho\nu}+\partial_\nu g_{\rho\mu}-\partial_\rho g_{\mu\nu} \right) \\ R &= g^{\mu\nu}R_{\mu\nu} \end{aligned} LSM full=−14WμνaWaμν−14BμνBμν−14GμνiGiμν+QˉLiγμDμQL+uˉRiγμDμuR+dˉRiγμDμdR+LˉLiγμDμLL+lˉRiγμDμlR+νˉRiγμDμνR−QˉLYuϕ~uR−QˉLYdϕdR−LˉLYlϕlR−LˉLYνϕ~νR+h.c.+∣Dμϕ∣2−μ2ϕ†ϕ−λ(ϕ†ϕ)2−12ξ(DμWμa)2−12ξ′(∂μBμ)2−12ξs(DμGμi)2+cˉa(−∂μDμab−igfabcWμb∂μ)cb+cˉ′∂2c′+cˉi(−∂μDμij−igsfijkGμj∂μ)ck\begin{aligned} \mathcal{L}_{\text{SM full}} &= -\frac{1}{4}W_{\mu\nu}^a W^{a\mu\nu} -\frac{1}{4}B_{\mu\nu}B^{\mu\nu} -\frac{1}{4}G_{\mu\nu}^i G^{i\mu\nu} \\ &\quad+\bar{Q}_L i\gamma^\mu D_\mu Q_L +\bar{u}_R i\gamma^\mu D_\mu u_R +\bar{d}_R i\gamma^\mu D_\mu d_R \\ &\quad+\bar{L}_L i\gamma^\mu D_\mu L_L +\bar{l}_R i\gamma^\mu D_\mu l_R +\bar{\nu}_R i\gamma^\mu D_\mu \nu_R \\ &\quad-\bar{Q}_L \mathbf{Y}_u \tilde{\phi} u_R -\bar{Q}_L \mathbf{Y}_d \phi d_R -\bar{L}_L \mathbf{Y}_l \phi l_R -\bar{L}_L \mathbf{Y}_\nu \tilde{\phi} \nu_R +\text{h.c.} \\ &\quad+|D_\mu \phi|^2 -\mu^2\phi^\dagger\phi -\lambda(\phi^\dagger\phi)^2 \\ &\quad-\frac{1}{2\xi}(D^\mu W_\mu^a)^2 -\frac{1}{2\xi'}(\partial^\mu B_\mu)^2 -\frac{1}{2\xi_s}(D^\mu G_\mu^i)^2 \\ &\quad+\bar{c}^a(-\partial^\mu D_{\mu}^{ab}-ig f^{abc}W_\mu^b\partial^\mu)c^b +\bar{c}'\partial^2 c' +\bar{c}^i(-\partial^\mu D_{\mu}^{ij}-ig_s f^{ijk}G_\mu^j\partial^\mu)c^k \end{aligned}

1.13 上标和下标

上标： X2

下标： H2O

Xi2

X2i

(Xi2 + Yj2)1/2

2. MDX组件演示

2.1 Warning组件

这是一个默认的警告组件，用于展示需要用户注意的信息。

这是一个危险警告组件，用于展示错误或危险信息。

这是一个成功警告组件，用于展示成功或积极信息。

2.2 Info组件

这是一个默认的信息组件，用于展示一般性信息。

这是一个信息变体的信息组件，用于展示详细信息。

2.3 Quote组件

"

这是一个默认的引用组件，用于展示引用的文本内容。

"

"

这是一个强调样式的引用组件，用于突出显示重要的引用内容。

"

"

这是一个带有作者信息的引用组件。

"

作者名称

"

这是一个带有作者和来源信息的引用组件。

"

作者名称•来源

3. 不支持的Markdown语法特性和MDX组件功能

3.1 不支持的Markdown语法特性

  1. 表格单元格合并
    • 语法：目前没有标准的Markdown语法支持表格单元格合并。
    • 不支持表现：无法实现表格单元格的合并效果。

3.2 不支持的MDX组件功能

  1. 自定义MDX组件

    • 不支持表现：除了预定义的Warning、Info和Quote组件外，无法直接在MDX文件中定义和使用自定义组件。

  2. 组件嵌套

    • 语法： 
      <Component1>
  <Component2>
    内容
  </Component2>
</Component1>
    • 不支持表现：嵌套的组件可能无法正确渲染，特别是当嵌套深度超过一层时。

  3. 组件属性传递

    • 语法： 
      <Component prop={value}>
  内容
</Component>
    • 不支持表现：除了预定义的variant、author、source等属性外，其他自定义属性可能无法正确传递和处理。

  4. 动态组件内容

    • 语法： 
      <Component>
  {dynamicContent}
</Component>
    • 不支持表现：组件内容只能是静态文本，无法包含动态表达式或变量。

  5. React Hooks和状态管理

    • 语法： 
      <Component>
  {() => {
    const [state, setState] = useState(false);
    return <div>{state}</div>;
  }}
</Component>
    • 不支持表现：组件内容中无法使用React Hooks或其他状态管理逻辑。

3.3 边界情况说明

  1. 大文件处理

    • 当MDX文件过大（超过10,000行）时，可能会出现解析性能下降或渲染延迟。

  2. 复杂嵌套结构

    • 当Markdown元素和MDX组件嵌套层级过深时，可能会出现解析错误或渲染异常。

  3. 特殊字符处理

    • 某些特殊字符（如反斜杠、引号等）在特定上下文中可能需要额外转义，否则可能会导致解析错误。

  4. 外部资源引用

    • 对于外部资源（如图片、脚本等）的引用，需要确保资源可访问，否则可能会出现加载失败的情况。

总结

本演示文件全面展示了当前MDX解析器支持的所有Markdown语法元素和MDX组件，以及不支持的特性边界。通过这份演示，可以清晰了解当前MDX解析能力的范围和限制，为内容创作和组件开发提供参考。

支持的核心功能包括：

  • 完整的标题层级（1-6级）
  • 段落和文本强调（粗体、斜体、删除线）
  • 代码块和行内代码（支持语法高亮）
  • 引用块和嵌套引用
  • 有序列表、无序列表和任务列表
  • 表格和对齐方式
  • 水平分隔线
  • 链接和图片
  • 脚注
  • 数学公式（行内和块级）
  • 上标和下标
  • 三个核心MDX组件（Warning、Info、Quote）及其变体

不支持的功能主要集中在高级Markdown语法和复杂MDX组件功能上，如定义列表、自动链接引用、表格单元格合并、自定义组件、组件嵌套等。

在实际使用中，建议遵循支持的语法和组件规范，以确保内容能够正确解析和渲染。

Footnotes

  1. 这是第一个脚注的内容。 ↩

  2. 这是第二个脚注的内容，可以包含多行文本。 ↩