Markdown Features

Docusaurus supports Markdown and a few additional features.

Front Matter

Markdown documents have metadata at the top called Front Matter:

my-doc.md

---id: my-doc-idtitle: My document titledescription: My document descriptionslug: /my-custom-url---
## Markdown heading
Markdown text with [links](./hello.md)

Links

Regular Markdown links are supported, using url paths or relative file paths.

Let's see how to [Create a page](/create-a-page).

Let's see how to [Create a page](./create-a-page.md).

Result: Let's see how to Create a page.

Images

Regular Markdown images are supported.

Add an image at static/img/docusaurus.png and display it in Markdown:

![Docusaurus logo](/img/docusaurus.png)

Code Blocks

Markdown code blocks are supported with Syntax highlighting.

```jsx title="src/components/HelloDocusaurus.js"function HelloDocusaurus() {    return (        <h1>Hello, Docusaurus!</h1>    )}```

src/components/HelloDocusaurus.js

function HelloDocusaurus() {  return <h1>Hello, Docusaurus!</h1>;}

Admonitions

Docusaurus has a special syntax to create admonitions and callouts:

:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::

My tip

Use this awesome feature option

Take care

This action is dangerous

MDX and React Components

MDX can make your documentation more interactive and allows using any React components inside Markdown:

export const Highlight = ({children, color}) => (  <span    style={{      backgroundColor: color,      borderRadius: '20px',      color: '#fff',      padding: '10px',      cursor: 'pointer',    }}    onClick={() => {      alert(`You clicked the color ${color} with label ${children}`)    }}>    {children}  </span>);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !

Supported date extraction patterns

Pattern	Example
Single file	2021-05-28-my-blog-post-title.md
MDX file	2021-05-28-my-blog-post-title.mdx
Single folder + index.md	2021-05-28-my-blog-post-title/index.md
Folder named by date	2021-05-28/my-blog-post-title.md
Nested folders by date	2021/05/28/my-blog-post-title.md
Partially nested folders by date	2021/05-28-my-blog-post-title.md
Nested folders + index.md	2021/05/28/my-blog-post-title/index.md
Date in the middle of path	category/2021/05-28-my-blog-post-title.md

Docusaurus can extract the date from the posts using any of the naming patterns above. It is advisable to choose one pattern and apply it to all posts to avoid confusion.