--- 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 heading Markdown text with [links](./hello.md) ``` ## 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.md). ``` **Result:** Let's see how to [Create a page](./create-a-page.md). ## Images Regular Markdown images are supported. Add an image at `static/img/docusaurus.png` and display it in Markdown: ```md ![Docusaurus logo](/img/docusaurus.png) ``` ![Docusaurus logo](/img/docusaurus.png) ## 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 !