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

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

做人如果没有梦想，跟咸鱼有什么分别？

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://github.com/imzxj

test image

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

Command	Description
`git status`	List all new or modified files
`git diff`	Show file differences that haven't been staged

JSX

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

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

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

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

Code Playground

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>I'm a playground!</h1>
    <p>Edit me, and see the changes below.</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>I'm a playground!</h1>
    <p>Edit me, and see the changes below.</p>
  </body>
</html>

Code Playground

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

  return (
    <>
      <p>count: {count}</p>
      <div style={{ display: 'flex', gap: 10 }}>
        <button onClick={() => setCount(count + 1)}>increase</button>
        <button onClick={() => setCount(count - 1)}>decrease</button>
      </div>
    </>
  );
}

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

  return (
    <>
      <p>count: {count}</p>
      <div style={{ display: 'flex', gap: 10 }}>
        <button onClick={() => setCount(count + 1)}>increase</button>
        <button onClick={() => setCount(count - 1)}>decrease</button>
      </div>
    </>
  );
}

First item
Second item
Third item

First item
Second item
Third item

First item
Second item
Third item

【参考】

This is the first footnote. ↩
Here's one with multiple paragraphs and code. ↩

MDX Syntax - Basic

Heading2

Heading3

Heading4

Heading5

Heading6

【参考】

MDX Syntax - Basic

Heading2

Heading3

Heading4

Heading5

Heading6

【参考】

Footnotes