MDX Syntax - Basic

明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。

转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

Heading2

Heading3

Heading4

Heading5

Heading6

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀

MDX MDX MDX MDX MDX MDX

https://mdxjs.com/

Here's a simple footnote,¹ and here's a longer one.²

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

pnpm dev

• First item
• Second item
• Third item

1. First item
2. Second item
3. Third item

• First item
• Second item
• Third item

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Mermaid 图表示例

流程图

时序图

甘特图

类图

状态图

自定义组件渲染

GitHub

YouTube

TypeScript

Node

React

Vue

图片懒加载

图片懒加载是一种网页优化技术，使图片只在用户需要查看时加载，而不是在页面加载时一次性加载所有图片。

列表组件测试

无序列表

• 第一项
• 第二项
• 第三项
  • 嵌套项 1
  • 嵌套项 2
    • 深层嵌套项

有序列表

1. 第一步
2. 第二步
3. 第三步
   1. 子步骤 1
   2. 子步骤 2

任务列表

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

混合列表

1. 有序项目
   • 无序子项
   • 另一个无序子项
2. 另一个有序项目
   1. 有序子项
   2. 另一个有序子项