Inline Element
Inline elements can be created using the format : followed by the element name, i.e. span. The text to add to the element is in [square brackets]. For example: :span[text to show].
The markdown:
You can create :span[inline] elements.
Results in the output:
<p>You can create <span>inline</span> elements.
Inline Element Attributes
Attributes can be added to inline elements using curly braces ({}). The attributes can specified long-hand, such as { title="My title" } or short-hand for ids { #my-id } and class names { .my-class }.
The markdown:
The :abbr[AB]{ title="Astro Accelerator" } site.
Results in the output:
<p>The <abbr title="Astro Accelerator">AB</abbr> site.</p>
Block Element
Block elements are started with three-colons and the element name, such as :::div. They are ended with three-colons, i.e. :::.
The markdown:
:::div
Text and *markdown*.
:::
Results in the output:
<div>
<p>Text and <em>markdown</em>.</p>
</div>
Block Element Attributes
Attributes are added to the start of the block.
The markdown:
:::div{.note}
Text and *markdown*.
:::
Results in the output:
<div class="note">
<p>Text and <em>markdown</em>.</p>
</div>
Image Attributes and Lazy Loading
You can create images with attributes, such as lazy loading, using an inline element.
The markdown:
:img{ src="/image.webp" alt="Example image" loading="lazy" }
Results in the output:
<img src="/image.webp" alt="Example image" loading="lazy">