---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
:::info
Docusaurus is based on **[MDX](https://mdxjs.com/)**. It allows you to use **[React and JSX](https://reactjs.org/docs/introducing-jsx.html)** in your Markdown documents.
You can use both `.md` and `.mdx` file extensions. We **recommend using the `.mdx` extension by default** and whenever using any advanced feature not included in [CommonMark](https://commonmark.org/): admonitions, tabs, React, JSX...
:::
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.mdx"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
## Markdown heading
Markdown text with [links](./hello.mdx)
```
## Links
Regular Markdown links are supported, using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.mdx).
```
**Result:** Let's see how to [Create a page](./create-a-page.mdx).
## Images
Regular Markdown images are supported.
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
```md
```
You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
```md
```
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return (
Hello, Docusaurus!
)
}
```
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return Hello, Docusaurus!
;
}
```
## 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
:::
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## MDX and React Components
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
```jsx
export const Highlight = ({children, color}) => (
{
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
);
This is Docusaurus green !
This is Facebook blue !
```
export const Highlight = ({children, color}) => (
{
alert(`You clicked the color ${color} with label ${children}`);
}}>
{children}
);
This is Docusaurus green !
This is Facebook blue !