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
|
# Admonitions
Admonitions (also known as callouts) highlight a particular block of text,
that exists slightly apart from the narrative of your page, such as a note or a warning.
Admonitions are a special case of {{directive}} extensions.
It is advised to use admonitions with the [colon_fence](#syntax/colon_fence) extension, which signify that the content of the block is also MyST Markdown.
::::{myst-example}
:::{tip}
Let's give readers a helpful hint!
:::
::::
## Admonition types
The following core admonition types are available:
```{myst-admonitions} attention, caution, danger, error, hint, important, note, seealso, tip, warning
```
These admonitions take no argument, but may be specified with options:
:class: A space-separated list of CSS classes to add to the admonition, conforming to the [identifier normalization rules](https://docutils.sourceforge.io/docs/ref/rst/directives.html#identifier-normalization).
:name: A reference target for the admonition (see [cross-referencing](#syntax/referencing)).
::::{myst-example}
:::{tip}
:class: myclass1 myclass2
:name: a-tip-reference
Let's give readers a helpful hint!
:::
[Reference to my tip](#a-tip-reference)
::::
Sphinx also adds a number of additional admonition types, for denoting changes to the documentation, or to the codebase:
::::{myst-example}
:::{versionadded} 1.2.3
Explanation of the new feature.
:::
:::{versionchanged} 1.2.3
Explanation of the change.
:::
:::{deprecated} 1.2.3
Explanation of the deprecation.
:::
::::
## Admonition titles
To provide a custom title for an admonition, use the `admonition` directive.
If you also want to style the admonition as one of the core admonition types,
you can use the `admonition` directive with the `class` option.
::::{myst-example}
:::{admonition} My custom title with *Markdown*!
:class: tip
This is a custom title for a tip admonition.
:::
::::
## Collapsible admonitions
The [sphinx-togglebutton](https://sphinx-togglebutton.readthedocs.io) extension allows you to create collapsible admonitions, by adding a `dropdown` class to the admonition.
::::{myst-example}
:::{note}
:class: dropdown
This admonition has been collapsed,
meaning you can add longer form content here,
without it taking up too much space on the page.
:::
::::
## Other Containers (grids, tabs, cards, etc.)
Using the [colon_fence](#syntax/colon_fence) extension,
content block can be wrapped in containers with a custom CSS class.
::::{myst-example}
:::bg-primary
This is a container with a custom CSS class.
- It can contain multiple blocks
:::
::::
Using the [sphinx-design](https://github.com/executablebooks/sphinx-design) extension,
it is also possible to create beautiful, screen-size responsive web-components.
::::{myst-example}
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::
::::
::::::{myst-example}
::::{tab-set}
:::{tab-item} Label1
Content 1
:::
:::{tab-item} Label2
Content 2
:::
::::
::::::
|
