---
id: introduction
title: Markdown Features
sidebar_label: Introduction
description: Docusaurus uses GitHub Flavored Markdown (GFM). Find out more about Docusaurus-specific features when writing Markdown.
slug: /markdown-features
---

```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';
```

Documentation is one of your product's interfaces with your users. A well-written and well-organized set of docs helps your users understand your product quickly. Our aligned goal here is to help your users find and understand the information they need, as quickly as possible.

Docusaurus 2 uses modern tooling to help you compose your interactive documentations with ease. You may embed React components, or build live coding blocks where your users may play with the code on the spot. Start sharing your eureka moments with the code your audience cannot walk away from. It is perhaps the most effective way of attracting potential users.

In this section, we'd like to introduce you to the tools we've picked that we believe will help you build a powerful documentation. Let us walk you through with an example.

:::important

This section assumes you are using the official Docusaurus content plugins.

:::

## Standard features

Markdown is a syntax that enables you to write formatted content in a readable syntax.

The [standard Markdown syntax](https://daringfireball.net/projects/markdown/syntax) is supported, and we use [MDX](https://mdxjs.com/) as the parsing engine, which can do much more than just parsing Markdown, like rendering React components inside your documents.

```md
### My Doc Section

Hello world message with some **bold** text, some _italic_ text and a [link](/)

![img alt](/img/docusaurus.png)
```

```mdx-code-block
<BrowserWindow>

<h2>My Doc Section</h2>

Hello world message with some **bold** text, some _italic_ text and a [link](/)

![img alt](/img/docusaurus.png)

</BrowserWindow>
```

## Quotes

Markdown quotes are beautifully styled:

```md
> This is a quote
```

> This is a quote

## Details

Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) HTML elements are beautifully styled:

```md
### Details element example

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>
        😲😲😲😲😲
      </div>
    </details>
  </div>
</details>
```

```mdx-code-block
<BrowserWindow>

<h3>Details element example</h3>

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>
        😲😲😲😲😲
      </div>
    </details>
  </div>
</details>

</BrowserWindow>

<br/>
```

:::note

In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!

:::
