mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-31 15:29:32 +02:00
88540207f8
* feat: add getting started doc at classic inital templates * fix: improve the contents of getting started page * fix: fix slug routing * fix: rename gettingStarted to getting-started and re-adjust the content * feat: add markdown-features docs * feat: add a page on how to create a simple document * feat: add a page on how to create pages * feat: add create a post doc * feat: add thank you page with whats next * fix: reduce the content of the init templates * update the init template Co-authored-by: Lisa Chandra <52909743+lisa761@users.noreply.github.com> Co-authored-by: Javid <singularity.javid@gmail.com> Co-authored-by: slorber <lorber.sebastien@gmail.com>
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.
|