Skip to main content

Markdown Features

Docusaurus supports the Markdown syntax and has some additional features.

Front Matter​

Markdown documents can have associated metadata at the top called Front Matter:

---
id: my-doc
title: My document title
description: My document description
sidebar_label: My doc
---

Markdown content

Regular Markdown links are supported using url paths or relative file paths.

Let's see how to [Create a page](/create-a-page).
Let's see how to [Create a page](./create-a-page.md).

Let's see how to Create a page.

Markdown images​

Regular Markdown images are supported.

Add an image at static/img/docusaurus.png and use this Markdown declaration:

![Docusaurus logo](/img/docusaurus.png)

Docusaurus logo

Code Blocks​

Markdown code blocks are supported with Syntax highlighting.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
    return (
        <h1>Hello, Docusaurus!</h1>
    )
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions​

Check more here: https://docusaurus.io/docs/markdown-features/admonitions

And also need to check here: https://docusaurus.io/docs/markdown-features/react#importing-components

Docusaurus has a special syntax to create admonitions and callouts:

:::note

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::caution

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::
note

Some content with markdown syntax. Check this api.

tip

Some content with markdown syntax. Check this api.

info

Some content with markdown syntax. Check this api.

caution

Some content with markdown syntax. Check this api.

danger

Some content with markdown syntax. Check this api.

React components​

Thanks to MDX, you can make your doc more interactive and use React components inside Markdown:

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.
Docusaurus green and Facebook blue are my favorite colors.

Code Snippest​

The code is 

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>
This is an apple 🍎

Test syntax highlighting​

web_main.py
import sys
import os
import sys, time, math, os

We can also add this package mainly about brightening the code

yarn add prism-react-renderer

Themes we can replace are:

  • dracula
  • duotoneDark
  • duotoneLight
  • github
  • nightOwl
  • nightOwlLight
  • oceanicNext
  • okaidia
  • palenight
  • shadesOfPurple
  • synthwave84
  • ultramin
  • vsDark
  • vsLight

you can go here to see available themes: node_modules/prism-react-renderer/themes The default theme is palenight Suggestions:

  • oceanicNext
  • vsDark (keywords will not be highlighted)

In the docusaurus.config.js file, please add this part if you wanna change the theme.

module.exports = {
  themeConfig: {
    prism: {
      theme: require('prism-react-renderer/themes/oceanicNext'),
    },
  }
}

Details element example​

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>
        😲😲😲😲😲
      </div>
    </details>
  </div>
</details>
Toggle me!
This is the detailed content

Nested toggle! Some surprise inside...
😲😲😲😲😲

Convert png to svg​

https://www.aconvert.com/image/

Put the graph at the central position.​

<p align="center"><img src="/docs/test.png"/> </p>

Or use this way:

<div class="img-center"> 

![](url.jpg)

</div>

Add the css code in the custom.css file

.img-center {
  display: flex;
  justify-content: center;
  width: 100%,
  }