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 }}}

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
}}}

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 {{{#code}}} 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.