Directives

In Marque, anything that starts with @ is part of the directive layer.

Directives are how you move from plain markdown into page structure, reusable UI blocks, and project-specific components.

The three authoring layers

Markdown

Use plain markdown for headings, paragraphs, lists, links, blockquotes, and code blocks.

Directives

Use directives when you want layout primitives like rows, cards, callouts, steps, or themed wrappers.

Inline syntax

Use button-style links, badges, and inline dividers inside markdown paragraphs when you need lighter UI affordances.

Built-in block directives

Layout primitives

  • @container: neutral grouping scope
  • @row: horizontal layout container
  • @column: vertical stack inside a row
  • @card: padded content block

Content blocks

  • @callout: highlighted note block
  • @stat: value + label pair
  • @step: numbered process item
  • @section / @hero: themed wrappers when your theme styles them

Project directives in the starter

  • @dropdown
  • @product-card
  • <span class="mq-sparkle" aria-hidden="true">✶</span>
  • <div class="mq-spotlight"></div>

Inline syntax

Buttons

mq
<a href="docs.html" class="mq-btn primary">Read more</a>
<a href="docs/configuration/themes.html" class="mq-btn">Open theme docs</a>

This renders as button-style links.

Badges

mq
<span class="mq-badge accent">New</span>
<span class="mq-badge secondary">Stable</span>

Example: New Stable

Inline divider

mq
Before @divider after

Example: Before after

Example page composition

mq
@container hero-intro
  ## Welcome
  Build the page with markdown and directives.

  @row features
    @card
      Fast setup.
    @end card

    @card
      Plain static output.
    @end card
  @end row features
@end container hero-intro

Welcome

Build the page with markdown and directives.

Fast setup.

Plain static output.

Project directive examples

mq
@dropdown "What ships in the starter?"
Marque includes a few example project directives.
@end dropdown

@product-card .featured Starter
## Starter Plan
Best for small teams.
@end product-card

Add some shine @sparkle
What ships in the starter?

Marque includes a few example project directives.

Starter Plan

Best for small teams.

Add some shine

Writing your own directives

Create files in directives/ and register them with defineDirective(...).

js
module.exports = ({ defineDirective }) => {
  defineDirective('product-card', {
    type: 'block',
    render: ({ mods, name, children, ctx }) => {
      const variant = ctx.escapeAttr(mods[0] || 'default');
      const title = ctx.escapeAttr(name || '');
      return `<product-card variant="${variant}" title="${title}">${children}</product-card>`;
    },
  });

  defineDirective('sparkle', {
    type: 'inline',
    render: () => '<span class="mq-sparkle" aria-hidden="true">✶</span>',
  });
};

You do not need to edit the parser core to add project directives. Put them in directives/*.js, register them, and Marque will load them.

Notes