Directive syntax

Directives are Red Glare's in-markdown way to render structured components without leaving CommonMark. Built on the MDC (Markdown Components) syntax, they look like this:

::alert{type="info"}
This is an informational alert.
::

And render as:

The three forms

1. Inline / block without children

Two-colon fence ::name{attrs}...:: wraps a block of markdown body:

::summary-box
Key information lives here.
::

2. With named slots

Use #slot-name inside the directive body to fill named slots (like the #heading on alerts):

::alert{type="warning"}
  #heading
  ### Warning title

  #body
  Body content goes here.
::

Named slots are converted by @comark/react into props prefixed with slot + PascalCase (#heading → slotHeading).

3. With nested directives

When a directive's body contains other directives, use three colons for the outer fence and two for the inner — bump the fence count by one for each level of nesting:

:::accordion
  ::accordion-item
    #heading
    ### Section title

    #body
    Section content.
  ::
:::

The containing directive needs at least one more colon than anything it contains. The parser uses the colon count to disambiguate nesting — if it confuses the fences, your directive will fail to parse or leak content into adjacent blocks.

Attribute syntax

Attributes appear in {...} after the directive name:

::alert{type="warning" role="alert"}
Urgent message.
::

• Strings: quoted with single or double quotes.
• Booleans: bare attribute name = true. ::accordion{bordered multiselectable} sets both to true.
• Numbers: bare numeric tokens. ::process-list{start=5} passes 5 as a number.

Unknown attributes are passed through to the component, so the directive pipeline doesn't gatekeep — but unknown directives fall through as literal text.

What directives are available?

Red Glare ships these out of the box:

Live examples

Each component page has rendered examples. A small taste here:

1. Write the directive

   Open the markdown file and drop in ::name{attrs} ... ::.

2. Preview it

   astro dev renders the directive as soon as you save.

3. Ship it

   The directive compiles to static HTML at build time. No runtime cost.

Custom directives

Red Glare's directive pipeline is built on comark plugins. Adding project-specific directives is possible by extending the pipeline, but that's not a v1 authoring surface — components you can register from user-land will come in a future release.

If you need a custom block type today, file a feature request on the repo.