Callouts

Create styled callout boxes for notes, warnings, and critical information in your Mordoc documentation.

6 min read

Callouts

Callouts draw attention to important information by displaying content in visually distinct boxes. Mordoc supports three types of callouts: note, warning, and danger.

Basic Callout Syntax

Create callouts using the custom tag syntax:

Markdown

{% callout type="note" %}
This is important information for readers.
{% /callout %}

Callout Types

Note Callouts

Use notes for helpful tips, additional context, or supplementary information:

Markdown

{% callout type="note" %}
This feature is available in all versions of Mordoc.
{% /callout %}

Result:

This feature is available in all versions of Mordoc.

When to use notes:

Helpful tips and best practices
Additional context or background
Related information
Feature availability
Pro tips

Warning Callouts

Use warnings for important information that users should be aware of:

Markdown

{% callout type="warning" %}
This operation cannot be undone. Make sure to backup your data first.
{% /callout %}

Result:

This operation cannot be undone. Make sure to backup your data first.

When to use warnings:

Potential issues or pitfalls
Important prerequisites
Breaking changes
Deprecated features
Actions that need caution

Danger Callouts

Use danger callouts for critical warnings about destructive or risky actions:

Markdown

{% callout type="danger" %}
Running this command will permanently delete all your data. There is no way to recover it.
{% /callout %}

Result:

Running this command will permanently delete all your data. There is no way to recover it.

When to use danger:

Destructive operations
Security risks
Critical errors
Data loss warnings
System-breaking actions

Callouts with Titles

Add custom titles to make callouts more specific:

Markdown

{% callout type="note" title="Pro Tip" %}
You can use keyboard shortcuts to speed up your workflow.
{% /callout %}

Result:

Pro Tip

You can use keyboard shortcuts to speed up your workflow.

Examples with Different Types

Markdown

{% callout type="warning" title="Breaking Change" %}
Version 2.0 removes support for Node.js 14. Please upgrade to Node.js 18 or higher.
{% /callout %}

Breaking Change

Version 2.0 removes support for Node.js 14. Please upgrade to Node.js 18 or higher.

Markdown

{% callout type="danger" title="Security Warning" %}
Never commit your API keys or secrets to version control.
{% /callout %}

Security Warning

Never commit your API keys or secrets to version control.

Rich Content in Callouts

Callouts support full markdown formatting:

Callouts with Lists

Markdown

{% callout type="note" title="Prerequisites" %}
Before starting, ensure you have:

- Node.js 18 or higher
- npm or yarn installed
- A code editor
- Basic JavaScript knowledge
{% /callout %}

Result:

Prerequisites

Before starting, ensure you have:

Node.js 18 or higher
npm or yarn installed
A code editor
Basic JavaScript knowledge

Callouts with Code

Markdown

{% callout type="warning" title="Configuration Required" %}
Add the following to your `config.json`:

```json
{
  "apiKey": "your-key-here"
}