Writing and styling your document

Documents are Markdown files. All general Markdown styling can be applied to documents on this website. Some frequently used styling options are covered here, more information can be found in the Markdown documentation.

Front Matter

You can give Markdown documents metadata at the top called Front Matter. The id is used to reference a document from another page. The title will overwrite the standard title in the left sidebar. The slug allows you to create a custom url for your document. You will most likely not use most of these features:

my-doc.md

---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---

Markdown content

Headings

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.

## Heading

### Smaller heading

Heading Ids

Use {#heading-ids} to reference a section. A heading ID is automatically generated for each heading.

Links

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.mdx).

Images

Regular Markdown images are supported.

You can use absolute paths to reference images in the static directory (static/img/docusaurus.png):

![Footloose logo](/img/footloose.png)

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:

![Footloose logo](./img/footloose.png)

Code Blocks

Markdown code blocks are supported with Syntax highlighting.

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

src/components/HelloFootloose.js

function HelloFootloose() {
  return <h1>Hello, Footloose!</h1>;
}

Callouts

Docusaurus has a special syntax to create admonitions and callouts:

:::tip[My tip]
Use this to highlight tips and suggestions, or sidenotes.
:::

:::danger[Take care]
Use this to highlight dangerous actions or mistakes.
:::

My tip

Use this to highlight tips and suggestions, or sidenotes.

Take care

Use this to highlight dangerous actions or mistakes.

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(`Slay ICT`)
    }}>
    {children}
  </span>
);

The result is <Highlight color="#e10600">Docusaurus green</Highlight> !

The result is: Press this for a surprise! !