Syntax
Attributes
Add custom classes, IDs, styles, and data attributes to native Markdown elements using the curly brace syntax.
Comark allows adding custom attributes to native Markdown elements using {...} syntax after the element.
Element Attributes
Strong/Bold
**bold text**{.highlight #important}
**bold text**{data-value="custom"}
**bold text**{bool}Italic/Emphasis
*italic text*{.emphasized}
_italic text_{#custom-id}Links
[Link text](url){target="_blank" rel="noopener"}
[Link text](url){.button .primary}
[External](https://example.com){target="_blank" .external-link}Images
{.responsive width="800" height="600"}
{.logo #site-logo}Inline Code
`code snippet`{.language-js}
`variable`{data-type="string"}Attribute Types Summary
| Syntax | Output | Description |
|---|---|---|
{bool} | :bool="true" | Boolean attribute |
{#my-id} | id="my-id" | ID attribute |
{.my-class} | class="my-class" | Class attribute |
{key="value"} | key="value" | Key-value attribute |
{:data='{"key": "val"}'} | data={"key": "val"} | JSON object attribute |
Span Attributes
Wrap inline text in a <span> element with custom attributes. This is useful for styling specific parts of text or adding metadata without creating custom components.
Syntax
[text content]{attributes}The text goes in square brackets [...] followed by attributes in curly braces {...}.
Examples
Class:
This is [highlighted text]{.highlight} in a paragraph.<p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>Multiple classes:
[Important]{.badge .primary} information here.<p><span class="badge primary">Important</span> information here.</p>ID:
Reference this [specific text]{#ref-1} later.<p>Reference this <span id="ref-1">specific text</span> later.</p>Inline styles:
[Blue text]{style="color: blue; font-weight: bold"}<p><span style="color: blue; font-weight: bold">Blue text</span></p>Data attributes:
[Earth]{data-planet="earth" data-type="terrestrial"}<p><span data-planet="earth" data-type="terrestrial">Earth</span></p>Combined attributes:
[Status: Active]{#status .badge .success data-state="active"}<p><span id="status" class="badge success" data-state="active">Status: Active</span></p>Common Use Cases
Styling with utility classes:
[Warning]{.text-red-500 .font-bold}: System maintenance in progress.Adding tooltips:
Hover over [this text]{title="Additional information"} for more details.Adding metadata for JavaScript:
Click [here]{data-action="open-modal" data-target="login"} to sign in.Accessibility attributes:
[Important]{role="alert" aria-label="Critical notice"} security update available.
Nested Markdown
Span syntax supports nested markdown formatting:
[**Bold** and *italic* text]{.highlight}<p><span class="highlight"><strong>Bold</strong> and <em>italic</em> text</span></p>Spans work within any paragraph or inline context, and support all standard HTML attributes. For block-level customization, use Components instead.