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
|
---
icon: material/format-font
---
# Formatting
Material for MkDocs provides support for several HTML elements that can be used
to highlight sections of a document or apply specific formatting. Additionally,
[Critic Markup] is supported, adding the ability to display suggested changes
for a document.
[Critic Markup]: https://github.com/CriticMarkup/CriticMarkup-toolkit
## Configuration
This configuration enables support for keyboard keys, tracking changes in
documents, defining sub- and superscript and highlighting text. Add the
following lines to `mkdocs.yml`:
``` yaml
markdown_extensions:
- pymdownx.critic
- pymdownx.caret
- pymdownx.keys
- pymdownx.mark
- pymdownx.tilde
```
See additional configuration options:
- [Critic]
- [Caret, Mark & Tilde]
- [Keys]
[Critic]: ../setup/extensions/python-markdown-extensions.md#critic
[Caret, Mark & Tilde]: ../setup/extensions/python-markdown-extensions.md#caret-mark-tilde
[Keys]: ../setup/extensions/python-markdown-extensions.md#keys
## Usage
### Highlighting changes
When [Critic] is enabled, [Critic Markup] can be used, which adds the ability to
highlight suggested changes, as well as add inline comments to a document:
``` title="Text with suggested changes"
Text can be {--deleted--} and replacement text {++added++}. This can also be
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
possible {>>and comments can be added inline<<}.
{==
Formatting can also be applied to blocks by putting the opening and closing
tags on separate lines and adding new lines between the tags and the content.
==}
```
<div class="result" markdown>
Text can be <del class="critic">deleted</del> and replacement text
<ins class="critic">added</ins>. This can also be combined into
<del class="critic">one</del><ins class="critic">a single</ins> operation.
<mark class="critic">Highlighting</mark> is also possible
<span class="critic comment">and comments can be added inline</span>.
<div>
<mark class="critic block">
<p>
Formatting can also be applied to blocks by putting the opening and
closing tags on separate lines and adding new lines between the tags and
the content.
</p>
</mark>
</div>
</div>
### Highlighting text
When [Caret, Mark & Tilde] are enabled, text can be highlighted with a simple
syntax, which is more convenient that directly using the corresponding
[`mark`][mark], [`ins`][ins] and [`del`][del] HTML tags:
``` title="Text with highlighting"
- ==This was marked (highlight)==
- ^^This was inserted (underline)^^
- ~~This was deleted (strikethrough)~~
```
<div class="result" markdown>
- ==This was marked (highlight)==
- ^^This was inserted (underline)^^
- ~~This was deleted (strikethrough)~~
</div>
[mark]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
[ins]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
[del]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
### Sub- and superscripts
When [Caret & Tilde][Caret, Mark & Tilde] are enabled, text can be sub- and
superscripted with a simple syntax, which is more convenient than directly
using the corresponding [`sub`][sub] and [`sup`][sup] HTML tags:
``` markdown title="Text with sub- and superscripts"
- H~2~O
- A^T^A
```
<div class="result" markdown>
- H~2~O
- A^T^A
</div>
[sub]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
[sup]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
### Adding keyboard keys
When [Keys] is enabled, keyboard keys can be rendered with a simple syntax.
Consult the [Python Markdown Extensions] documentation to learn about all
available shortcodes:
``` markdown title="Keyboard keys"
++ctrl+alt+del++
```
<div class="result" markdown>
++ctrl+alt+del++
</div>
[Python Markdown Extensions]: https://facelessuser.github.io/pymdown-extensions/extensions/keys/#extendingmodifying-key-map-index
|
