富媒体内容测试 | How I Make Cookies

这篇文章用于测试博客系统对各种富媒体内容的支持能力。

Open Table of contents

1. 视频嵌入

hello world
— Elon Musk (@elonmusk)
June 27, 2022

著名的质能方程： $E = mc^2$ ，其中 $E$ 是能量， $m$ 是质量， $c$ 是光速。

欧拉公式：

e^{i\pi} + 1 = 0

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

高斯积分：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

任何足够先进的技术都与魔法无异。

— 阿瑟·克拉克

嵌套引用：

第一层引用

第二层嵌套引用

第三层嵌套引用

点击展开查看更多内容

这里是折叠的内容。可以放置一些不需要立即展示的详细信息。

def hello():
    print("Hello from collapsed content!")

另一个折叠块 - 常见问题

Q: 为什么要使用 MDX？

A: MDX 允许在 Markdown 中使用 JSX 组件，提供更丰富的交互能力。

Q: 性能会受影响吗？

A: 静态生成时会预渲染，客户端 hydration 只发生在需要交互的组件上。

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

function example() {
  const a = 1;
  const b = 2; 
  const c = 3; 
  return a + b + c;
}

function calculate(x, y) {
  return x + y; 
  return x * y; 
}

下面是一个简单的计数器组件，用于测试 React 在 MDX 中的集成：

Count: 0

点击按钮试试！这个组件是用 React 编写的，在客户端进行 hydration 后可以交互。

如果你能看到以上所有内容正常渲染，说明博客系统已经具备了丰富的内容展示能力：