---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.md"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
Markdown content
```
## Headings {/* #my-heading-id */}
Markdown headings are supported using the standard “#” syntax and are automatically added to the table of contents. The number of `#` corresponds to the heading level.
```md
## Headings
My text
```
### Heading Ids {/* #my-custom-id */}
Add `{/* #my-custom-id */}` after the heading text to assign it an explicit anchor id, used for linking.
```md
### Heading Ids {/_ #my-custom-id _/}
```
## 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.
````md
```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:
```md
:::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 !