Markdown Basic Components

Front matter

As I said before The front matter is used to provide additional metadata for your doc page and it is optional.

Meta information

Meta information is optional. You may add more information for a document on top of that: description and keywords.

---
description: This is description for a document
keywords:
  - docs
  - example
---

Doc tags

Optionally, you can add tags to your doc pages, which introduces another dimension of categorization in addition to the docs sidebar. Tags are passed in the front matter as a list of labels:

---
id: doc-with-tags
title: A doc with tags
tags:
  - Demo
  - Getting started
---

TIP

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

Page Title

React component imports

If you are using MDX with react components, You can add any React component imports right below the frontmatter and before starting the main doc content.

---
title: hello
---
import Thumbnail from '@site/src/components/Thumbnail';

Page title

Add the main title for each docs page.

An example:

# Introduction

You can also add title frontmatter.

---
title: Introduction
---

By default the title will be the label for sidebar item. So, to use a shorten/different label for sidebar use the sidebar_label frontmatter to override.

Headings & Ids

Headings

Please follow good old h1(#) => h6(######) hierarchy.

# This is the Main Page Title

## This is a H2 heading

### This is a H3 heading

#### This is a H4 heading

##### This is a H5 heading

###### This is a H6 heading

NOTE

At any point of time there should only be one h1 per doc. h2 => h6 can be any number as required while ensuring correct hierarchy.

Heading Ids

Docusaurus will by default generate an id for each heading to be able to link to individual sections.

The generated id's are nothing but the kebab-cased-heading-text-itself.

## Heading H2 example

<!-- will have a generated id as below -->

heading-h2-example

To link to this section, we can append the id as a #hash-param to url.

[Link to Sub Section](/path/to/sub/section.mdx#heading-h2-example)`.

<!-- or just the hash-param if its in the same document -->

[Link to sub section in same document](#heading-ids)

Quotes

> Easy to maintain open source documentation websites.
>
> — Docusaurus

Easy to maintain open source documentation websites.

— Docusaurus

Autolink literals

www.example.com, https://example.com, and contact@example.com.

www.example.com, https://example.com, and contact@example.com.

Footnote

A note[^1]

[^1]: Big note.

A note¹

Strikethrough

~one~ or ~~two~~ tildes.

one or two tildes.

Table

You can use common markdown syntax for a table.

```md
| Name | Description | Etc  |
| ---- | ----------- | ---- |
| John | Developer   |      |
| Sean | Developer   |      |
```

Name	Description	Etc
John	Developer
Sean	Developer

If you want to have cell width, you can use <div> with style tags like below.

| a     | <div style={{width:'200px'}}>b</div> | hello world | This long title |
|-------|:-------------------------------------|------------:|:---------------:|
| Hello | World                                |         123 |       456       |

a	b	hello world	This long title
Hello	World	123	456

Tasklist

* [ ] to do
* [x] done

• to do
• done

Footnotes

1. Big note. ↩