mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-03 12:17:20 +02:00
d205f35c4c
* codesandbox: use node 14 by default * Regenerate examples * Add example json files to prettierrignore
128 lines
2.4 KiB
Text
128 lines
2.4 KiB
Text
---
|
|
title: Markdown Features
|
|
---
|
|
|
|
Docusaurus supports the [Markdown](https://daringfireball.net/projects/markdown/syntax) syntax and has some additional features.
|
|
|
|
## Front Matter
|
|
|
|
Markdown documents can have associated metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
|
|
|
```md
|
|
---
|
|
id: my-doc
|
|
title: My document title
|
|
description: My document description
|
|
sidebar_label: My doc
|
|
---
|
|
|
|
Markdown content
|
|
```
|
|
|
|
## Markdown 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).
|
|
```
|
|
|
|
Let's see how to [Create a page](./create-a-page.md).
|
|
|
|
## Markdown images
|
|
|
|
Regular Markdown images are supported.
|
|
|
|
Add an image at `static/img/docusaurus.png` and use this Markdown declaration:
|
|
|
|
```md
|
|
|
|
```
|
|
|
|
|
|
|
|
## Code Blocks
|
|
|
|
Markdown code blocks are supported with Syntax highlighting.
|
|
|
|
```jsx title="src/components/HelloDocusaurus.js"
|
|
function HelloDocusaurus() {
|
|
return (
|
|
<h1>Hello, Docusaurus!</h1>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx title="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
|
|
|
|
:::
|
|
|
|
:::tip My tip
|
|
|
|
Use this awesome feature option
|
|
|
|
:::
|
|
|
|
:::danger Take care
|
|
|
|
This action is dangerous
|
|
|
|
:::
|
|
|
|
## React components
|
|
|
|
Thanks to [MDX](https://mdxjs.com/), you can make your doc more interactive and use React components inside Markdown:
|
|
|
|
```jsx
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '2px',
|
|
color: 'red',
|
|
padding: '0.2rem',
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
|
```
|
|
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '2px',
|
|
color: '#fff',
|
|
padding: '0.2rem',
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
|
|
Facebook blue
|
|
</Highlight> are my favorite colors.
|