🎌 Admonitions

Docusaurus v3 supports admonitions using the Markdown ::: syntax (powered by Remark Admonitions). They are useful for highlighting notes, warnings, tips, and other callout boxes.

Built-in admonition types

Type	Example
note	General information
tip	Best practices or recommendations
info	Additional information
warning	Something to pay attention to
danger	Critical warnings or destructive actions
caution	Important cautionary notes

---

1. Note

:::note

This is a simple note.

:::

note

This is a simple note.

---

2. Tip

:::tip

Use Docker Compose to simplify development.

:::

tip

Use Docker Compose to simplify development.

---

3. Info

:::info

ESP32 supports Wi-Fi and Bluetooth.

:::

info

ESP32 supports Wi-Fi and Bluetooth.

---

4. Warning

:::warning

Do not disconnect power during firmware updates.

:::

warning

Do not disconnect power during firmware updates.

---

5. Danger

:::danger

This command permanently deletes all data.

:::

danger

This command permanently deletes all data.

---

6. Caution

:::caution

High voltage may be present on exposed terminals.

:::

caution

High voltage may be present on exposed terminals.

---

Custom title

You can override the default title.

:::tip[Best Practice]

Always commit working code before refactoring.

:::

Best Practice

Always commit working code before refactoring.

or

:::warning[Important]

Back up your configuration first.

:::

Important

Back up your configuration first.

---

Nested Markdown

Admonitions support all Markdown.

:::info

## Supported Features

- Lists
- **Bold**
- _Italic_
- `code`

```cpp
int main() {
    return 0;
}
```

| MCU       | Flash |
| --------- | ----- |
| STM32F103 | 64 KB |
| STM32F407 | 1 MB  |

:::

info

Supported Features

• Lists
• Bold
• Italic
• code

int main() {
    return 0;
}

MCU	Flash
STM32F103	64 KB
STM32F407	1 MB

---

Collapsible content

Admonitions themselves are not collapsible, but you can combine them with HTML:

<details>
<summary>Show details</summary>

:::tip

Hidden information.

:::

</details>

Show details

tip

Hidden information.

---

Styling via CSS

Each admonition has CSS classes such as:

.theme-admonition {
}

.theme-admonition-note {
}

.theme-admonition-tip {
}

.theme-admonition-info {
}

.theme-admonition-warning {
}

.theme-admonition-danger {
}

.theme-admonition-caution {
}

Example:

.theme-admonition-tip {
  font-size: 1.05rem;
  border-left-width: 6px;
}

.theme-admonition-note {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

---

Custom admonition types

By default, Docusaurus v3 only provides these six types:

• note
• tip
• info
• warning
• danger
• caution

If you want additional callout styles (such as success, question, bug, example, or exercise), you can create custom admonition components by swizzling the Admonition component or by defining your own React components with custom CSS. This lets you match your documentation's branding while retaining the same Markdown authoring experience.

Component	Icon	Built-in style
Question	❓	alert--info
Bug	🐞	alert--danger
Example	💡	alert--success
Exercise	📝	alert--warning

Here are some commonly used emojis that work well for Docusaurus admonitions and educational documentation.

Admonition	Emoji	Meaning
Note	📝 📄 📌	General note
Tip	💡 ✨ 🚀	Best practice or recommendation
Info	ℹ️ 📖 🔍	Additional information
Warning	⚠️ 🚨	Be careful
Danger	⛔ ☠️ 🔥	Critical warning
Caution	⚡ ❗	Use with care

Educational callouts

Type	Emoji
Question	❓ 🤔
Exercise	📝 🏋️ 📚
Example	💡 📋 🧩
Solution	✅ ✔️ 🎯
Answer	💬
Homework	🏠 📖
Quiz	🧠 🎓
Challenge	🏆 🚀
Practice	🔄 ✍️
Discussion	💬 🗣️
Observation	👀
Remember	🧠 📌
Important	⭐ ❗
Definition	📖 📚
Formula	🧮
Algorithm	⚙️
Code	💻 👨‍💻
Terminal	🖥️
Debug	🐞 🔍
Fix	🔧
Build	🏗️
Success	✅ 🎉
Failure	❌
Experiment	🧪
Lab	🧫
Electronics	🔌 ⚡
IoT	🌐 📡
Sensor	📡
MCU	🤖
Timing	⏱️
Configuration	⚙️

STEM / Engineering

Topic	Emoji
Mathematics	➗ 🧮
Physics	⚛️
Electronics	🔌
Circuit	⚡
Embedded	🤖
Programming	💻
AI	🤖 🧠
Robotics	🤖
Network	🌐
Cloud	☁️
Database	🗄️
Security	🔒
Docker	🐳
Linux	🐧
Git	🌿

Nice combinations

💡 Tip
⚠️ Warning
❗ Important
❓ Question
📝 Exercise
💻 Code
🐞 Bug
🔧 Fix
🧪 Experiment
📖 Reference
🎯 Objective
🚀 Challenge
⭐ Best Practice
📌 Remember

For technical documentation and courses, a consistent set like the following provides a clean, professional appearance:

Callout	Recommended
Note	📝
Info	ℹ️
Tip	💡
Warning	⚠️
Danger	⛔
Caution	❗
Question	❓
Exercise	📝
Example	💡
Bug	🐞
Code	💻
Solution	✅
Objective	🎯
Experiment	🧪
Best Practice	⭐

This set is widely recognized, renders well across modern browsers and operating systems, and fits nicely with Docusaurus documentation.

Banners

• custom.css

.course-banner {
  text-align: center;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
}

.course-banner h2 {
  margin: 0;
}

note

<div className="alert alert--secondary course-banner">

## note {/_ #note _/}

</div>

Markdown	CSS class	Typical use
:::note	alert--secondary	General information

---

success

<div className="alert alert--success course-banner">

## success {/_ #success _/}

</div>

Markdown	CSS class	Typical use
:::tip	alert--success	Tips, recommendations

Objetivos

<div className="alert alert--success course-banner">

## Objetivos {/_ #objetivos _/}

</div>

---

info

<div className="alert alert--info course-banner">

## info {/_ #info _/}

</div>

Markdown	CSS class	Typical use
:::info	alert--info	Important information

Preparação

<div className="alert alert--info course-banner">

## Preparação {/_ #preparação _/}

</div>

Conceitos

<div className="alert alert--info course-banner">

## Conceitos {/_ #conceitos _/}

</div>

Praticando

<div className="alert alert--info course-banner">

## Praticando {/_ #praticando _/}

</div>

Metodologia

<div className="alert alert--info course-banner">

## Metodologia {/_ #metodologia _/}

</div>

Relatório Imediato

<div className="alert alert--info course-banner">

## Relatório Imediato {/_ #relatorio-imediato _/}

</div>

---

warning

<div className="alert alert--warning course-banner">

## warning {/_ #warning _/}

</div>

Markdown	CSS class	Typical use
:::warning	alert--warning	Warnings, cautions

Metodologia

<div className="alert alert--warning course-banner">

## Metodologia {/_ #metodologia _/}

</div>

---

danger

<div className="alert alert--danger course-banner">

## danger {/_ #danger _/}

</div>

Markdown	CSS class	Typical use
:::danger	alert--danger	Critical warnings/errors

---

Markdown	CSS class	Typical use
:::note	alert--secondary	General information
:::tip	alert--success	Tips, recommendations
:::info	alert--info	Important information
:::warning	alert--warning	Warnings, cautions
:::danger	alert--danger	Critical warnings/errors