Attributes have the following syntax:
attributes <- '{' whitespace* attribute (whitespace attribute)*
whitespace* '}'
attribute <- id_attribute | class_attribute | kv_attribute
id_attribute <- '#' letter (alphanum | '-' | '_' | ':' | '.')*
class_attribute <- '.' letter (alphanum | '-' | '_')*
kv_attribute <- attrname '=' attrvalue
attrname <- (asciiletter | '_' | ':')
(asciialphanum | '_' | '.' | '-' | ':')*
attrvalue <- unquotedvalue | quotedvalue
unquotedvalue <- [^"-=<>`:whitespace:]+
quotedvalue <- '"' ([^"] | '\' '"')* '"'
Attributes that occur at the end of the text of a Setext or ATX heading (separated by whitespace from the text) affect the heading element.
# Heading {#ident .class key="value value" key2=value2}
.
<h1 id="ident" class="class" data-key="value value" data-key2="value2">Heading</h1>
Heading {#ident .class key="value"}
=====
.
<h1 id="ident" class="class" data-key="value">Heading</h1>
Whitespace is tolerated around the delimiters:
# Heading { #ident .class key="value" }
.
<h1 id="ident" class="class" data-key="value">Heading</h1>
Multiple class attributes are combined:
# Heading {.class1 .class2 class="class3"}
.
<h1 class="class1 class2 class3">Heading</h1>
Only the last id attribute is used:
# Heading {#id1 #id2 id="id3"}
.
<h1 id="id3">Heading</h1>
Heading attributes can be followed by whitespace, but otherwise must come at the end of the line.
# Foo {#bar}
.
<h1 id="bar">Foo</h1>
Headings should still work without attributes:
# ATX
Setext
------
.
<h1>ATX</h1>
<h2>Setext</h2>
Attributes that occur after the opening fence in a fenced code block affect the code block element.
``` {#ident .class key="value value" key2=value2}
xyz
```
.
<pre id="ident" class="class" data-key="value value" data-key2="value2"><code>xyz
</code></pre>
~~~~{#mycode .ruby .number-lines}
xyz
~~~~
.
<pre id="mycode" class="ruby number-lines"><code>xyz
</code></pre>
If any non-space content comes after the attribute spec, the whole thing is treated as a raw info string.
``` {#foo} bar
xyz
```
.
<pre><code class="language-{#foo}">xyz
</code></pre>
Here the attribute spec is at the end, so the first word provides the info string and the rest is treated as an attribute.
``` bar {#foo}
xyz
```
.
<pre id="foo"><code class="language-bar">xyz
</code></pre>
Attributes on inline elements must immediately follow the element to which they belong. If they follow a space, then they belong to the space.
`hi`{#ident .class key=value}
.
<p><code id="ident" class="class" data-key="value">hi</code></p>
`hi` {#ident .class key=value}
.
<p><code>hi</code><span id="ident" class="class" data-key="value"> </span></p>
The attributes can wrap:
`hi`{#ident .class
key=value}
.
<p><code id="ident" class="class" data-key="value">hi</code></p>
Attributes that occur immediately before a block element, on a line by themselves, affect that element.
{.special}
* * * *
.
<hr class="special" />
{#foo .special}
bar
.
<p id="foo" class="special">bar</p>
{#foo .special}
# Hi
.
<h1 id="foo" class="special">Hi</h1>
When conflicting specifications of the same attribute are given, the last one takes precedence, except for classes, which are cumulative.
{#id1}
{#id2}
# Heading {#id3}
.
<h1 id="id3">Heading</h1>
{#id1}
{#id3}
# Heading
.
<h1 id="id3">Heading</h1>
{.class1 k=1}
{.class2 .class3 k=2}
# Heading {.class4}
.
<h1 class="class1 class2 class3 class4" data-k="2">Heading</h1>
Attributes that occur at the end of a reference link definition affect links that refer to that definition.
[foo]
[foo]: bar "title" {#ident .centered .big}
.
<p><a id="ident" class="centered big" href="bar" title="title">foo</a></p>
Attributes that occur immediately after an inline element affect that element.
[foo](bar){#ident .class key="value value" key2=value2}
.
<p><a id="ident" class="class" data-key="value value" data-key2="value2" href="bar">foo</a></p>
{#ident .centered .big}
.
<p><img id="ident" class="centered big" src="bar" alt="foo" /></p>
[foo]{#ident .centered .big}
[foo]: bar
.
<p><a id="ident" class="centered big" href="bar">foo</a></p>
*hi*{.underline}
.
<p><em class="underline">hi</em></p>
Consecutive attribute specifiers may be used, either for blocks or for inlines.
*hi*{.underline}{#foo}
.
<p><em class="underline" id="foo">hi</em></p>
{.special}
{#foo}
* * * *
.
<hr class="special" id="foo" />
Entities can be used in attribute values.
# Heading {key="value" }
.
<h1 data-key="value">Heading</h1>