Skip to main content

General Formatting Examples

See the Docs's Tutorial - Markdown Features for a bit more info!

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

Result: Let's see how to Create a page.

Images​

![Docusaurus logo](/img/docusaurus-social-card.jpg)

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​

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

:::

NOTE: For some reason, [] appear around "My tip" and "Take care" in the rendered code (above), they should not be there.

My tip

Use this awesome feature option

Take care

This action is dangerous

Admonition below requires [] brackets around title

Your Title with some Markdown syntax!

Some content with some Markdown syntax.

More Admonition Examples​

info

Some content with Markdown syntax. Check this api.

warning

Some content with Markdown syntax. Check this api.

Parent

Parent content

Child

Child content

Deep Child

Deep child content

MDX and React Components​

MDX can make your documentation more interactive and allows using any React components inside Markdown:

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> !

This is Docusaurus green !

This is Facebook blue !

Admonitions with MDX​

Use tabs in admonitions
print("Hello World")

To see more admonition customizations, see here https://docusaurus.io/docs/markdown-features/admonitions#usage-in-jsx.