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>
AST
For this span:
[Hello world]{.greeting style="color: blue"}
The AST nodes are:
[
"span",
{
"class": "greeting",
"style": "color: blue"
},
"Hello world"
]
Spans work within any paragraph or inline context, and support all standard HTML attributes. For block-level customization, use Components instead.
Next Steps
- Comark AST - Understand the full AST format
- Components - Create block and inline components
- Vue Rendering - Render Comark in Vue
- React Rendering - Render Comark in React