1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
title: Attribute Lists Extension
# Attribute Lists
## Summary
The Attribute Lists extension adds a syntax to define attributes on the various
HTML elements in markdown's output.
This extension is included in the standard Markdown library.
## Syntax
The basic syntax was inspired by Maruku's Attribute Lists feature (see [web archive][Maruku]).
[Maruku]: https://web.archive.org/web/20170324172643/http://maruku.rubyforge.org/proposal.html
### The List
An example attribute list might look like this:
```text
{: #someid .someclass somekey='some value' }
```
A word which starts with a hash (`#`) will set the id of an element.
A word which starts with a dot (`.`) will be added to the list of classes
assigned to an element.
A key/value pair (`somekey='some value'`) will assign that pair to the element.
Be aware that while the dot syntax will add to a class, using key/value pairs
will always override the previously defined attribute. Consider the following:
```text
{: #id1 .class1 id=id2 class="class2 class3" .class4 }
```
The above example would result in the following attributes being defined:
```text
id="id2" class="class2 class3 class4"
```
HTML includes support for some attributes to be a single term, like `checked`, for example. Therefore, the attribute
list `{: checked }` would result in `checked` if the [output format](../reference.md#output_format) is `html` or
`checked="checked"` if the output format is `xhtml`.
Curly braces can be backslash escaped to avoid being identified as an attribute list.
```text
\{ not an attribute list }
```
Opening and closing curly braces which are empty or only contain whitespace are ignored whether they are escaped or
not. Additionally, any attribute lists which are not located in the specific locations documented below are ignored.
The colon after the opening brace is optional, but is supported to maintain consistency with other implementations.
Therefore, the following is also a valid attribute list:
```text
{ #someid .someclass somekey='some value' }
```
In addition, the spaces after the opening brace and before the closing brace are optional. They are recommended as
they improve readability, but they are not required.
The Attribute List extension does not have any knowledge of which keys and/or values are valid in HTML. Therefore, it
is up to the document author to ensure that valid keys and values are used. However, the extension will escape any
characters in the key which are not valid by replacing them with an underscore. Multiple consecutive invalid
characters are reduced to a single underscore.
### Block Level
To define attributes for a block level element, the attribute list should
be defined on the last line of the block by itself.
```text
This is a paragraph.
{: #an_id .a_class }
```
The above results in the following output:
```html
<p id="an_id" class="a_class">This is a paragraph.</p>
```
An exception is headers, as they are only ever allowed on one line.
```text
A setext style header {: #setext}
=================================
### A hash style header ### {: #hash }
```
The above results in the following output:
```html
<h1 id="setext">A setext style header</h1>
<h3 id="hash">A hash style header</h3>
```
!!! seealso "See Also"
By default, the [Fenced Code Blocks](./fenced_code_blocks.md#attributes) extension includes limited support for
attribute lists. To get [full support](./fenced_code_blocks.md#keyvalue-pairs), both extensions must be enabled.
### Inline
To define attributes on inline elements, the attribute list should be defined
immediately after the inline element with no white space.
```text
[link](http://example.com){: class="foo bar" title="Some title!" }
```
The above results in the following output:
```html
<p><a href="http://example.com" class="foo bar" title="Some title!">link</a></p>
```
If the [tables](./tables.md) extension is enabled, attribute lists can be defined on table cells. To differentiate
attributes for an inline element from attributes for the containing cell, the attribute list must be separated from
the content by at least one space and be defined at the end of the cell content. As table cells can only ever be on
a single line, the attribute list must remain on the same line as the content of the cell.
```text
| set on td | set on em |
|--------------|-------------|
| *a* { .foo } | *b*{ .foo } |
```
The above example results in the following output:
```html
<table>
<thead>
<tr>
<th>set on td</th>
<th>set on em</th>
</tr>
</thead>
<tbody>
<tr>
<td class="foo"><em>a</em></td>
<td><em class="foo">b</em></td>
</tr>
</tbody>
</table>
```
Note that in the first column, the attribute list is preceded by a space; therefore, it is assigned to the table cell
(`<td>` element). However, in the second column, the attribute list is not preceded by a space; therefore, it is
assigned to the inline element (`<em>`) which immediately preceded it.
Attribute lists may also be defined on table header cells (`<th>` elements) in the same manner.
### Limitations
There are a few types of elements which attribute lists do not work with. As a reminder, Markdown is a subset of HTML
and anything which cannot be expressed in Markdown can always be expressed with raw HTML directly.
__Code Blocks:__
: Code blocks are unique in that they must be able to display Markdown syntax. Therefore, there is no way to
determine if an attribute list is intended to be part of the code block or intended to define attributes on the
wrapping element. For that reason, the extension ignores code blocks. To define attributes on code blocks, the
[codehilite] and [fenced code blocks] extensions provide some options.
[codehilite]: code_hilite.md
[fenced code blocks]: fenced_code_blocks.md
__Nested Elements:__
: Markdown provides mechanisms for nesting various block level elements within other elements. However, attribute
lists only ever get applied to the immediate parent. There is no way to specify that an attribute list should be
applied some number of levels up the document tree. For example, when including an attribute list within a
blockquote, the attribute list is only ever applied to the paragraph the list is defined in. There is no way to
define attributes on the `blockquote` element itself.
__Implied Elements:__
: There are various HTML elements which are not represented in Markdown text, but only implied. For example, the
`ul` and `ol` elements do not exist in Markdown. They are only implied by the presence of list items (`li`). There
is no way to use an attribute list to define attributes on implied elements, including but not limited to the
following: `ul`, `ol`, `dl`, `table`, `thead`, `tbody`, and `tr`.
## Usage
See [Extensions](index.md) for general extension usage. Use `attr_list` as the
name of the extension.
This extension does not accept any special configuration options.
A trivial example:
```python
markdown.markdown(some_text, extensions=['attr_list'])
```
|
