Markdown Render Preview

Heading 1

Main content. Bold Italic Link Code

Heading 2

Heading 3 with Custom Anchor 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.

提示

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>
  );
}

Show more Shiki cases

Highlight Lines

// Meta Mode:
+const a = 1;
-const b = 2;

// Comment Mode:
function App() {
  return <div>Hello World</div>; // [!code highlight]
}

Word Highlight

// Meta Mode:
function App() {
  return <div>Hello World</div>;
}

// Comment Mode:
// [!code word:World]
function App() {
  return <div>Hello World</div>;
}

Error Level

function App() {
  const a = 1; // [!code warning]
  return <div>Hello World</div>; // [!code error]
}

Limited HTML Tags Support

Click to expand!

Content inside details

Tomato TextLime TextSkyblue Text

Footnote

This is a footnote¹.

Footnote Content ↩