Directive syntax
Directives are extensions to Markdown that let you build richer content with a simple syntax. A directive is made of colons, optional inline content in square brackets [...], and optional key/value properties in curly braces {...}. Quotes around values are optional when the value has no spaces.
There are three declaration types. The number of leading colons determines the type.
| Type | Syntax | Use |
|---|---|---|
| Text | :directive[content]{props} | Inline with text (one colon) |
| Leaf | ::directive[content]{props} | Block-level, single line (two colons) |
| Container | :::directive{props} ... ::: | Block-level, wraps other content (three colons) |
Renders inline with surrounding text. One colon.
Rendered:
View the Workshop Studio Wiki here !
Source:
1
View the Workshop Studio Wiki :link[here]{href="https://w.amazon.com/bin/view/AWS_Workshop_Studio/" external="true"}!Renders on its own line (block-level). Two colons.
Rendered:
1
console.log('Hello world!');Source:
1
::code[console.log('Hello world!');]{showCopyAction=true language="js"}Renders on its own line and wraps other Markdown or directives. Three colons.
Rendered:
Some example text. I can also have other directives in here. Here's the Workshop Studio Wiki in case you missed it earlier.
Source:
1
2
3
4
:::alert{type="success" header="Example notification"}
Some example text. I can also have other directives in here.
:link[Here's the Workshop Studio Wiki]{href="https://w.amazon.com/bin/view/AWS_Workshop_Studio/" external="true"} in case you missed it earlier.
:::When nesting container directives, the outer directive must use more colons than the inner one. For deeper nesting, keep adding colons to the parent containers.
Source:
1
2
3
4
5
6
7
8
::::tabs
:::tab{label="First"}
Some content
:::
:::tab{label="Second"}
Some other content
:::
::::