Callouts

Callouts make notes in your content stand out. Write them right in Markdown, with nothing to import.

Directive syntax

:::tip[Preview locally first]
Run `pnpm dev` and take a look before you publish.
:::

The title goes in the brackets and can be left out. The block holds ordinary Markdown, so lists and code blocks work as they are, with no prefix on every line.

There are five types, each with its own color in the default styles:

A misspelled type such as :::tips fails the build, instead of silently showing up as text.

GitHub syntax

GitHub’s alert syntax works too, handy for content moved over from a README:

> [!WARNING]
> This cannot be undone.

It also shows correctly on GitHub and in editor previews, but has no title. Use the directive syntax when you need one.

In components and layouts

In .astro files, use the Callout component, which renders the same as the Markdown syntax:

---
import { Callout } from '@minidocs/astro/components';
---

<Callout.Root type="tip">
  <Callout.Title>Preview locally first</Callout.Title>
  <p>Run <code>pnpm dev</code> and take a look before you publish.</p>
</Callout.Root>

type is one of the five types, note by default.

Turning the syntax off

Both syntaxes are on by default and can be turned off separately:

minidocs({
  markdown: {
    directives: false, // :::tip
    alerts: false, // > [!TIP]
  },
});

With the directive syntax on, text with colons in your content, such as 10:30 or a:hover, still shows as it is.