Parameters

SevenMark uses a parameter system to pass key-value data to elements.

How Parameters Work

Parameters are generic key-value pairs. The parser accepts #key="value" and stores the parsed value in the AST without semantic validation. Parameter names support Unicode letters, digits, underscore, and hyphen ([\p{L}\p{N}_-]+).

This means:

• #color, #style, #lang, #caption, and #theme are renderer conventions, not parser keywords
• Hyphenated keys such as #dark-color and #dark-bgcolor are valid
• Unknown parameters are silently ignored by renderers that do not use them

Parameter Syntax

Parameters use #key="value" for key-value pairs, or #flag for boolean flags where presence means enabled:

{{{ #style="color:red" #size="16px" Red text }}}

{{{#table #caption="Inventory" #sortable
[[#head [[Product]] [[Price]]]]
[[[[Laptop]] [[$1200]]]]
}}}

Quoted Values

Parameter values use double quotes. Quotes inside values can be escaped:

{{{ #style="font-family: \"Arial\", sans-serif" Text }}}

Quoted values are parsed as inline SevenMark content, not as plain unstructured strings. That allows escapes and simple inline markup to be preserved in the parameter value AST. The outer quotes are delimiters and are not part of the stored value.

Parameter Boundaries

For brace elements, parameters appear immediately after the element name or the opening {{{ for styled elements:

``` #lang="rust"
fn main() {}
```

{{{ #class="badge" Inline styled content }}}

For double-bracket links and file media, parameters are only recognized as a prefix when the prefix ends with ||:

[[#class="doc-link" || Guide | Guide label]]

Without that separator, the body is parsed as the target text itself:

[[#class="doc-link" Guide | This target starts with #class text]]

Brace table rows, brace table cells, brace list items, and folds use structural [[...]] segments. Parameters inside those segments belong to the row, cell, or item:

{{{#table
[[#head [[Name]] [[Value]]]]
[[[[#x="2" Wide cell]]]]
}}}

Boolean Flags

Some parameters act as flags:

$$
\sum_{i=1}^{n} x_i
$$

{{{#table #sortable
[[#head [[Name]] [[Value]]]]
[[[[A]] [[1]]]]
}}}

Common Renderer Conventions

The following parameters are commonly recognized by SevenMark renderers:

Parameter	Description	Common Usage
#style	Raw inline CSS declarations	Styled blocks, tables, lists, links, media wrappers
#color	Text color	Styled blocks and style-aware renderers
#bgcolor	Background color	Styled blocks and style-aware renderers
#size	Font size	Styled blocks and style-aware renderers
#opacity	Opacity	Styled blocks and style-aware renderers
#class	Extra CSS class names	Many block, link, and media renderers
#onclick	Constrained class actions on click	Non-navigation visual roots such as styled blocks, tables, rows, cells, lists, folds, quotes, code, and ruby
#dark-style	Raw dark-mode CSS declarations	Visual renderers that emit data-dk and participate in the shared dark-style registry
#dark-color	Dark-mode text color	Visual renderers that emit data-dk and participate in the shared dark-style registry
#dark-bgcolor	Dark-mode background color	Visual renderers that emit data-dk and participate in the shared dark-style registry
#dark-size	Dark-mode font size	Visual renderers that emit data-dk and participate in the shared dark-style registry
#dark-opacity	Dark-mode opacity	Visual renderers that emit data-dk and participate in the shared dark-style registry

#dark-* parameters are separate from provider-specific flags like #dark on some external media embeds such as Spotify or Discord.

Click Class Actions

#onclick is not JavaScript. Renderers validate it as a small action language and emit safe metadata for SevenMark clients to hydrate.

Allowed actions are:

• add-class,target-class,class-name
• remove-class,target-class,class-name
• toggle-class,target-class,class-name

Multiple actions can be joined with ; and run in order:

{{{ #class="tab tab-a selected" #onclick="remove-class,tab,selected;add-class,tab-a,selected"
Open A
}}}
{{{ #class="tab tab-b" #onclick="remove-class,tab,selected;add-class,tab-b,selected"
Open B
}}}

Class action tokens use ASCII letters, digits, _, and -. Invalid actions are ignored by the HTML renderer. Link and media navigation roots do not use #onclick; navigation behavior should stay explicit.

Element-specific Parameters

Tables

Table-level parameters:

• #caption: render a <caption>
• #wrapper-align: align the table wrapper (left, center, or right)
• #wrapper-width: set a fixed width on the wrapper div
• #wrapper-style: arbitrary light-mode CSS on the wrapper (shared stylesheet, data-lk)
• #wrapper-dark-style: dark-mode CSS on the wrapper (data-dk)
• #sortable: emit data-sortable="true" for sortable-table behavior
• #onclick: constrained class actions on the rendered table root

Row-level parameters:

• #head: render the row inside <thead> with <th> cells
• #onclick: constrained class actions on the rendered <tr>

Cell-level parameters:

• #x: colspan
• #y: rowspan
• #onclick: constrained class actions on the rendered <td> or <th>

{{{#table #caption="Inventory" #wrapper-align="right" #sortable
[[#head [[Product]] [[Price]]]]
[[[[#x="2" Featured item]] [[In stock]]]]
}}}

Links and Media

Double-bracket links and file media can start with a parameter prefix. The prefix must end with ||; the text after || is the target/display syntax.

• Link and file targets are written as target text, not as target parameters.
• #style, #class, and #dark-* style the rendered link or media wrapper.
• #theme="light" and #theme="dark" annotate file: media with data-theme="light|dark"; other values are ignored.

[[#class="doc-link" || Guide#installation | Jump to installation]]
[[#theme="dark" || file:logo-dark.svg | Dark logo]]

Footnotes

Footnotes commonly use:

• #display: custom marker text for unnamed footnotes
• #name: reusable named footnote identifier

Text{{{#fn #display="*" Note with custom marker. }}}.
Again{{{#fn #name="api-limit" Shared note. }}}.

Code and CSS Blocks

Common parameters include:

• #lang on fenced code blocks for syntax highlighting
• #class on fenced code blocks
• #onclick on fenced code blocks
• #dark-* on visual renderers such as fenced code blocks to populate shared dark-mode styling rules

{{{#css}}} does not accept parameters; write dark-mode selectors directly in the authored stylesheet.

``` #lang="rust" #class="example" #dark-bgcolor="#111" #dark-color="#eee"
fn main() {}
```

Parameter Combinations

Multiple parameters can be combined:

{{{ #style="border:2px solid blue; padding:8px" #color="red" #size="18px"
Multi-styled text
}}}

[[#theme="light" || https://example.com/docs#api | Docs]]

Nested Parameter Usage

Parameters work in nested structures:

{{{#table #caption="Nested examples"
[[#head [[Name]] [[Content]]]]
[[[[Code]] [[``` #lang="python" #class="nested"
print("hello")
```
]]]]
[[[[Media]] [[[[#theme="dark" || file:image.png | Example]]]]]]
}}}