Vaulthalla Logo

Directives

Directives are Markdown containers powered by the plugin directive registry. They keep content portable while giving the renderer structured hooks.

Public Directives

  • :::callout
  • :::details
  • :::toc
  • :::steps
  • :::cards
  • :::card
  • :::tabs
  • :::tab
  • :::section
  • :::2col
  • :::3col
  • :::cell

Basic Syntax

1:::callout {variant="warning" title="Read this first"}2Content stays Markdown.3:::

Attributes use directive marker lines:

1:::card {title="Markdown Field" href="/docs/markdown-field" theme="cyan"}2Portable Markdown content.3:::

Quoted values are supported. Boolean-style attributes are supported where a directive defines them, such as open="true" on details or numbered on card steps.

Rendering Guarantees

  • Directives render server-side.
  • Directives do not require client hydration.
  • Nested Markdown remains Markdown.
  • Unknown or malformed attributes warn where possible and fall back safely.
  • Stable selectors are emitted for testing and styling, such as data-directive, data-theme, and vl-md-* classes.

Heading Anchors

Headings render with deterministic IDs:

1## Install2 3## Install

Conceptual output:

1<h2 id="install">Install</h2>2<h2 id="install-1">Install</h2>

The table of contents directive uses those same heading IDs.

Directive Pages