Annotate

{% annotate %}
The refrakt.md framework builds on Markdoc to provide a semantic content transformation pipeline. Authors write standard Markdown with lightweight tag annotations, and the framework handles the rest — parsing, transforming, and rendering into structured, themed HTML.

{% note %}
Markdoc is an open-source Markdown-based authoring system created by Stripe. It extends Markdown with a custom tag syntax that enables structured content without sacrificing readability.
{% /note %}

Runes are the core abstraction — they wrap ordinary Markdown and reinterpret it based on context. A heading inside a nav rune becomes a group title; a list inside a recipe rune becomes ingredients. The same primitives take on different meaning depending on which rune contains them.
{% /annotate %}

<div data-rune="annotate" data-rune-fields="{&quot;variant&quot;:&quot;margin&quot;}">
  <div data-name="body">
    <p>The refrakt.md framework builds on Markdoc to provide a semantic content transformation pipeline. Authors write standard Markdown with lightweight tag annotations, and the framework handles the rest — parsing, transforming, and rendering into structured, themed HTML.</p>
    <aside data-field="note" data-rune="annotate-note">
      <div data-name="body">
        <p>Markdoc is an open-source Markdown-based authoring system created by Stripe. It extends Markdown with a custom tag syntax that enables structured content without sacrificing readability.</p>
      </div>
    </aside>
    <p>Runes are the core abstraction — they wrap ordinary Markdown and reinterpret it based on context. A heading inside a nav rune becomes a group title; a list inside a recipe rune becomes ingredients. The same primitives take on different meaning depending on which rune contains them.</p>
  </div>
</div>

<div class="rf-annotate rf-annotate--margin" data-variant="margin" data-elevation="flush" data-rune="annotate" data-density="full">
  <div data-name="body" class="rf-annotate__body" data-section="body">
    <p>The refrakt.md framework builds on Markdoc to provide a semantic content transformation pipeline. Authors write standard Markdown with lightweight tag annotations, and the framework handles the rest — parsing, transforming, and rendering into structured, themed HTML.</p>
    <aside data-field="note" class="rf-annotate-note" data-rune="annotate-note" data-density="full">
      <div data-name="body" class="rf-annotate-note__body">
        <p>Markdoc is an open-source Markdown-based authoring system created by Stripe. It extends Markdown with a custom tag syntax that enables structured content without sacrificing readability.</p>
      </div>
    </aside>
    <p>Runes are the core abstraction — they wrap ordinary Markdown and reinterpret it based on context. A heading inside a nav rune becomes a group title; a list inside a recipe rune becomes ingredients. The same primitives take on different meaning depending on which rune contains them.</p>
  </div>
</div>

{% annotate variant="inline" %}
Runes use standard Markdoc tag syntax.

{% note %}
This means any Markdoc-compatible editor will understand them.
{% /note %}

The content inside a rune is regular Markdown.
{% /annotate %}

<div data-rune="annotate" data-rune-fields="{&quot;variant&quot;:&quot;inline&quot;}">
  <div data-name="body">
    <p>Runes use standard Markdoc tag syntax.</p>
    <aside data-field="note" data-rune="annotate-note">
      <div data-name="body">
        <p>This means any Markdoc-compatible editor will understand them.</p>
      </div>
    </aside>
    <p>The content inside a rune is regular Markdown.</p>
  </div>
</div>

<div class="rf-annotate rf-annotate--inline" data-variant="inline" data-elevation="flush" data-rune="annotate" data-density="full">
  <div data-name="body" class="rf-annotate__body" data-section="body">
    <p>Runes use standard Markdoc tag syntax.</p>
    <aside data-field="note" class="rf-annotate-note" data-rune="annotate-note" data-density="full">
      <div data-name="body" class="rf-annotate-note__body">
        <p>This means any Markdoc-compatible editor will understand them.</p>
      </div>
    </aside>
    <p>The content inside a rune is regular Markdown.</p>
  </div>
</div>