Using Markdown Syntax in Docusaurus Documentation

Docusaurus supports using Markdown as the primary content authoring format and compiles Markdown files into React components via the MDX compiler. This article introduces commonly used Markdown syntax and its usage in Docusaurus.

1. Headings

Use # for a first-level heading, ## for a second-level heading, and so on.

# First-level heading
## Second-level heading
### Third-level heading

2. Emphasis

Bold: **bold** or __bold__
Italic: *italic* or _italic_

3. Links and Images

Link: [Docusaurus Official Site](https://docusaurus.io/)
Image: ![Image description](/img/docusaurus.png)

4. Code Blocks

Wrap code with triple backticks. You can specify the language for syntax highlighting:

```js
console.log('Hello, Docusaurus!');
```

Demo:

console.log('Hello, Docusaurus!');

5. Blockquotes

Use > for blockquotes:

> This is a blockquote.

Demo:

This is a blockquote.

6. Details

Docusaurus supports embedding HTML elements like <details>, with beautiful styles:

<details>
  <summary>Click to expand</summary>
  Here is the detailed content, which can include **Markdown** syntax.
</details>

Demo:

Details

Click to expand

Here is the detailed content, which can include Markdown syntax.

7. Front Matter

Each Markdown file can have metadata at the top, wrapped in three dashes, using YAML format:

---
title: Document Title
description: This is the document description
---

8. MDX vs. CommonMark

Docusaurus v3 uses the MDX parser for all .md and .mdx files by default, allowing you to embed React components directly in Markdown.
To use standard CommonMark, set markdown.format: 'detect' in docusaurus.config.js. .md files will be parsed with CommonMark, .mdx with MDX.
See the official documentation for details.