168 lines
3.3 KiB
Text
168 lines
3.3 KiB
Text
---
|
|
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 <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:
|
|
|
|
```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}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '20px',
|
|
color: '#fff',
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
alert(`You clicked the color ${color} with label ${children}`)
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
|
|
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
|
```
|
|
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '20px',
|
|
color: '#fff',
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
alert(`You clicked the color ${color} with label ${children}`);
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
|
|
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|