Skip to main content

The Ultimate Docusaurus Guide: Build Top-Notch Documentation 🔥

1. Headings​

# Heading H1
## Heading H2
### Heading H3
#### Heading H4
##### Heading H5
###### Heading H6

Heading H1

Heading H2​

Heading H3​

Heading H4​

Heading H5​
Heading H6​

2. Emphasis​

**bold text**
*italic text*
~~strikethrough~~
`inline code`

bold text
italic text
strikethrough
inline code

3. Code Blocks​

Basic code block with syntax highlighting

```js
const greet = () => console.log("Hello World");
```
const greet = () => console.log("Hello World");

Including a file name/title

```js title="index.js"
const greet = () => console.log("Hello World");
```
index.js
const greet = () => console.log("Hello World");

Highlighting specific lines

```jsx {2-3}
function Hello() {
  console.log("Hello World");
  return <h1>Hello!</h1>;
}
```
function Hello() {
  console.log("Hello World");
  return <h1>Hello!</h1>;
}

4. Lists​

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2

1. Step one
2. Step two
3. Step three
  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
  1. Step one
  2. Step two
  3. Step three
  1. Tables
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| A        | B        | C        |
| D        | E        | F        |
Column 1Column 2Column 3
ABC
DEF

6. Links & Images​

[Link to Salucci](https://salucci.ch)

![Alt Text for Image](./path-to-image.png)

7. Blockquotes​

> This is a quote.
>
> And this is the second line of the quote.

This is a quote.

And this is the second line of the quote.

8. Admonitions​

Admonitions are special note boxes. Docusaurus supports several defaults, such as :::note, :::tip, :::info, :::caution, and :::danger.

:::note
**Note:** This is an important note!
:::

:::tip
**Tip:** Here's a helpful tip!
:::

:::info
**Info:** Additional information goes here.
:::

:::caution
**Caution:** Proceed carefully with this step.
:::

:::danger
**Warning:** This can cause serious issues.
:::
note

Note: This is an important note!

tip

Tip: Here's a helpful tip!

info

Info: Additional information goes here.

caution

Caution: Proceed carefully with this step.

danger

Warning: This can cause serious issues.

9. Custom Titles in Admonitions​

:::tip[Custom Title]
Use a custom title and add your content here.
:::
Custom Title

Use a custom title and add your content here.

10. Tabs​

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

<Tabs>
  <TabItem value="javascript" label="JavaScript">

```javascript
console.log("Hello JavaScript!");
```

  </TabItem>
  <TabItem value="python" label="Python">

```python
print("Hello Python!")
```

  </TabItem>
</Tabs>
console.log("Hello JavaScript!");

11. Details (Expandable Section)​

<details>
<summary>Click to expand!</summary>

This content is hidden until you expand it.

</details>
Click to expand!

This content is hidden until you expand it.

12. Mermaid Diagrams (since Docusaurus v2.0)​

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Option A]
  B -->|No| D[Option B]

---

## 13. Footnotes


Here is a sentence with a footnote.[^1]

[^1]: This is the content of the footnote.
```
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Option A]
  B -->|No| D[Option B]

---

## 13. Footnotes


Here is a sentence with a footnote.[^1]

[^1]: This is the content of the footnote.