Styled Elements

Styled elements allow you to apply custom styling parameters to any content.

Basic Styled Element

Use {{{ with parameters but no element identifier:

{{{ #style="color:red" Red text }}}
{{{ #size="20px" Large text }}}
{{{ #color="blue" #size="16px" Blue text, 16px }}}

The first parsed parameter is what makes this a styled element. Without any parameter after {{{, the same delimiter form is parsed as a literal block. The closing delimiter is matched with triple-brace depth, and the body is parsed as nested SevenMark content after trailing ASCII whitespace before the close is trimmed.

Common Parameters

Color

{{{ #color="red" Red text }}}
{{{ #color="blue" Blue text }}}
{{{ #color="#00ff00" Green text with hex color }}}
{{{ #color="rgb(255, 0, 255)" Magenta text with RGB }}}

Background Color

{{{ #bgcolor="yellow" Text with yellow background }}}
{{{ #bgcolor="#f0f0f0" Text with light gray background }}}
{{{ #color="white" #bgcolor="black" White text on black background }}}

Size

{{{ #size="10px" Small text }}}
{{{ #size="16px" Normal text }}}
{{{ #size="24px" Large text }}}
{{{ #size="2em" Text sized with em units }}}

Opacity

{{{ #opacity="1.0" Fully opaque (default) }}}
{{{ #opacity="0.7" Slightly transparent }}}
{{{ #opacity="0.5" Half transparent }}}
{{{ #opacity="0.2" Very transparent }}}

Custom Styles

The #style parameter accepts any CSS-like styling:

{{{ #style="font-weight:bold; text-decoration:underline" Bold and underlined }}}
{{{ #style="border: 2px solid red; padding: 10px" Text with border and padding }}}
{{{ #style="transform: rotate(5deg)" Slightly rotated text }}}

Combining Parameters

Multiple parameters can be used together:

{{{ #color="white" #bgcolor="blue" #size="18px" #style="padding: 5px; border-radius: 3px"
Styled text with multiple parameters
}}}

Output Tag

Styled elements normally render as span for inline content and div when the style payload or child content needs a block wrapper. #tag can override that choice for neutral styled wrappers:

{{{ #tag="span" #style="background:#f00;color:#fff" Inline wrapper }}}
{{{ #tag="a" #class="tab tab-a" #onclick="toggle-class,tab,selected" Link-like tab }}}

Allowed #tag values are span and a. #tag="a" creates a link-like wrapper but does not create navigation or an href.

Click Class Actions

Styled elements support #onclick class actions. This is a constrained SevenMark action language, not a JavaScript event handler:

{{{ #class="fold" #onclick="toggle-class,fold,hide" Show/hide }}}
{{{ #class="fold hide" Hidden content }}}

Allowed operations are add-class, remove-class, and toggle-class.

Namumark Wiki Blocks

SevenMark also accepts namumark-style wiki blocks. HTML-style attributes on the opening line are converted into normal SevenMark parameters.

{{{#!wiki style="border:1px solid #ccc; padding:10px" class="note" tag="span"
This body is parsed as nested SevenMark content.

[[https://example.com | Links]] and **inline styles** work here.
}}}

Quoted attributes such as style="...", class="...", tag="...", and onclick="..." are supported on the opening line and map to the same renderer parameters used by SevenMark-native syntax. Backslash escapes can be used inside quoted namumark attributes, including escaped quotes and escaped backslashes.

Namumark Size and Color

For migration compatibility, Namumark inline size and color blocks are converted into normal styled elements:

{{{+2 Larger text}}}
{{{-1 Smaller text}}}
{{{#red Red text}}}
{{{#888,#ff0 Light and dark text colors}}}

+1 through +5 and -1 through -5 map to the corresponding SevenMark #size value. Color values map to #color, and comma-separated color pairs map to #color plus #dark-color.

Dark Mode Overrides

Styled elements can also expose a separate dark-mode style payload with #dark-style, #dark-color, #dark-bgcolor, #dark-size, and #dark-opacity.

{{{ #color="#222" #bgcolor="#f6f6f6" #dark-color="#eee" #dark-bgcolor="#111"
Theme-aware text block
}}}

{{{ #style="padding: 8px 12px; border-radius: 6px" #dark-style="border:1px solid #333"
Custom dark-mode wrapper
}}}

Styled Content with Markup

Styled elements can contain other SevenMark syntax:

{{{ #color="red"
This text is red and contains **bold** and *italic* formatting.
}}}

{{{ #bgcolor="lightyellow" #style="padding: 10px"
Highlighted box with **important** information.
}}}

Common Use Cases

Highlighting Important Text

{{{ #bgcolor="yellow" #style="padding: 2px 5px"
This is a highlighted warning!
}}}

Creating Colored Labels

Status: {{{ #color="white" #bgcolor="green" #style="padding: 3px 8px; border-radius: 3px" Active }}}

Priority: {{{ #color="white" #bgcolor="red" #style="padding: 3px 8px; border-radius: 3px" High }}}

Emphasis Boxes

{{{ #bgcolor="#f0f8ff" #style="border-left: 4px solid blue; padding: 10px; margin: 10px 0"
**Note:** This is an informational box with custom styling.
}}}

Styled in Complex Structures

In Lists

{{{#list #1
[[Normal item]]
[[{{{ #color="red" Important item }}}]]
[[{{{ #bgcolor="yellow" Highlighted item }}}]]
}}}

In Tables

{{{#table
[[[[Product]] [[Status]]]]
[[[[Widget A]] [[{{{ #color="green" Available }}}]]]]
[[[[Widget B]] [[{{{ #color="red" Out of Stock }}}]]]]
}}}

In Headers

# {{{ #color="blue" Styled Header }}}

## {{{ #style="border-bottom: 2px solid red" Underlined Header }}}

Advanced Styling

Box Styling

{{{ #style="background: linear-gradient(to right, #f0f0f0, #e0e0e0); border: 1px solid #ccc; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1)"
Content in a styled box with gradient background, border, rounded corners, and shadow.
}}}

Nested Styled Elements

{{{ #bgcolor="lightgray" #style="padding: 20px"
Outer styled container

{{{ #bgcolor="white" #style="padding: 10px; margin: 10px 0"
Inner styled container with different styling
}}}

Back to outer styling
}}}

Common Style Patterns

Status Messages

{{{ #color="white" #bgcolor="green" #style="padding: 10px; border-radius: 5px"
✓ Success: Operation completed successfully.
}}}

{{{ #color="white" #bgcolor="red" #style="padding: 10px; border-radius: 5px"
✗ Error: Something went wrong.
}}}

{{{ #color="black" #bgcolor="yellow" #style="padding: 10px; border-radius: 5px"
⚠ Warning: Please review before proceeding.
}}}

Callout Boxes

{{{ #bgcolor="#e7f3ff" #style="border-left: 4px solid #2196F3; padding: 15px"
**Information:** This is an informational callout box.
}}}

{{{ #bgcolor="#fff3e0" #style="border-left: 4px solid #ff9800; padding: 15px"
**Tip:** Here's a helpful tip for users.
}}}

Badges and Tags

{{{ #color="white" #bgcolor="#2196F3" #style="padding: 2px 8px; border-radius: 12px; font-size: 12px"
v2.0
}}}

{{{ #color="white" #bgcolor="#4CAF50" #style="padding: 2px 8px; border-radius: 3px; font-size: 11px; text-transform: uppercase"
new
}}}

When to Use Styled Elements

Use Styled Elements For:

• Custom visual styling needs
• Creating visual emphasis or decoration
• Implementing custom design patterns
• Highlighting specific content

Use Specific Elements Instead:

• Code → Use ````}}}` for programming code
• Quotes → Use {{{#quote}}} for semantic meaning
• Headers → Use #, ##, etc. for document structure
• Lists → Use {{{#list}}} for proper list semantics

Technical Notes

• Styled elements use {{{ without an element identifier (e.g., no #code, #list, etc.)
• At least one parameter is required — without any parameter, {{{ content }}} is parsed as a literal block instead of a styled element
• The #style parameter accepts styling property-value pairs
• Individual parameters (#color, #size, etc.) are convenience shortcuts
• Dark-mode parameters (#dark-style, #dark-color, #dark-bgcolor, #dark-size, #dark-opacity) populate separate dark styling metadata
• Parameters are case-sensitive
• Multiple parameters can be combined
• Parameters are stored in the AST's CommonStyleAttributes structure

Literal vs. Styled: The parser distinguishes between literal blocks and styled elements based on the presence of parameters. {{{ content }}} without parameters becomes a literal block, while {{{ #param content }}} with at least one parameter becomes a styled element.