preview.md

Markdown Render Preview

Heading 1

Main content. Bold Italic Link Code

Heading 2

Heading 3 with Custom Anchor Id {#custom-id}

Heading 4

Heading 5

Heading 6

Task List

• Task 1
• Task 2
• Task 3

Emoji Transform

Emoji Text => :smile: :+1: :rocket: => 😄 👍 🚀

Emoji Unicode => 😄 👍 🚀

Table

Normal Table

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Align Table

Header 1	Header 2	Header 3
Center	Center	Center
Cell 1	Cell 2	Cell 3

Autolink

Plain URL text: https://example.com => https://example.com

Math

$$ L = \frac{1}{2} \rho v^2 S C_L $$

$$ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} $$

GitHub Styled Alert

Note

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

[!TIP/提示] Optional information to help a user be more successful.

With Custom Title

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.

Code Block (Powered by Shiki)

Normal Code (with Highlight Lines)

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

With Focus

import { useState } from 'react';

export function App() {
  const [count, setCount] = useState(0); // [!code focus]

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Diff Language

+const a = 1;
-const b = 2;

Limited HTML Tags Support

Click to expand!

Content inside details

Tomato TextLime TextSkyblue Text

Footnote

This is a footnote¹.

Footnotes

1. Footnote Content ↩