Components

DocAnvil provides built-in components rendered via fenced directives. These are processed before Markdown rendering, so you can use Markdown inside them.

Directive Syntax

Components use a fenced block syntax with triple colons:

<div class="name">
<p>Content goes here. <strong>Markdown</strong> is supported.</p>
</div>

The opening fence is ::: followed by the component name and optional attributes in curly braces. The closing fence is ::: on its own line.

Attributes

Attributes are specified inside {...} after the component name:

Multiple attributes can be combined: :::note{title="Important" .custom-class #my-note}

Note

Display informational callouts with a blue/indigo theme.

Raw syntax:

<div class="admonition note">
<p class="admonition-title">Custom Title</p>
<p>Your content here. Supports <strong>Markdown</strong>.</p>
</div>

Warning

Display cautionary messages with an orange theme.

Raw syntax:

<div class="admonition warning">
<p class="admonition-title">Danger Zone</p>
<p>Your warning content here.</p>
</div>

Tabs

Group content into switchable tabs. Each tab is defined with a nested :::tab directive. The outer ::::tabs uses four colons so the inner :::tab closings (three colons) don't end the container prematurely:

console.log("Hello!");

print("Hello!")

fn main() {
    println!("Hello!");
}

Raw syntax:

<div class="tabs">
<div class="tab-headers">
  <button class="tab-header active" data-tab="0">JavaScript</button>
  <button class="tab-header" data-tab="1">Python</button>
</div>
<div class="tab-content active" data-tab="0">
<p>Content for the JavaScript tab.</p>
</div>
<div class="tab-content" data-tab="1">
<p>Content for the Python tab.</p>
</div>
</div>

If no title is provided, tabs are labeled "Tab 1", "Tab 2", etc.

Code Group

A specialized tab component for comparing code blocks across languages. Each fenced code block becomes a tab, with the language name as the tab label:

fn greet(name: &str) {
    println!("Hello, {name}!");
}

def greet(name):
    print(f"Hello, {name}!")

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Raw syntax:

<div class="code-group">
<div class="tab-headers">
  <button class="tab-header active" data-tab="0">rust</button>
  <button class="tab-header" data-tab="1">python</button>
</div>
<div class="tab-content active" data-tab="0"><pre><code class="language-rust">fn greet(name: &amp;str) {
    println!("Hello, {name}!");
}</code></pre></div>
<div class="tab-content" data-tab="1"><pre><code class="language-python">def greet(name):
    print(f"Hello, {name}!")</code></pre></div>
</div>

Nesting Directives

When nesting directives, use more colons on the outer fence to distinguish it from inner closings. The ::::tabs (four colons) and :::tab (three colons) pattern is the primary example of this:

<div class="tabs">
<div class="tab-headers">
  <button class="tab-header active" data-tab="0">First</button>
  <button class="tab-header" data-tab="1">Second</button>
</div>
<div class="tab-content active" data-tab="0">
<p>Content here.</p>
</div>
<div class="tab-content" data-tab="1">
<p>Content here.</p>
</div>
</div>

The outer directive uses 4 colons (::::) while the inner ones use 3 (:::). The closing fence must match the exact number of colons used in the opening fence.

Unknown Directives

If you use a directive name that doesn't match a built-in component, the content is wrapped in a <div> with the directive name as the class:

<div class="custom-block">
<p>This becomes a <code>&lt;div class=&quot;custom-block extra&quot;&gt;</code>.</p>
</div>

This lets you create custom styled blocks using your own CSS.

Summary

Related Pages

• Markdown — text formatting, tables, and other Markdown features
• Wiki-links — double-bracket links and inline popovers