Using the following MKdocs extensions can enhance your TechDocs, making the user experience richer and more appealing for the reader. These samples were developed based on the reference documentation here. View the source code of this page to discover the correct markup to use for each item displayed below.
!!! quote "This is a quote" You don't have to add a title to a quote, they're optional.
There are lots of types to choose from. You don't have to add a title to an admonition, they're optional. See here.
!!! info "This is an Info Card" There are lots of types to choose from. See here.
!!! warning "This is a Warning Card" This callout contains a warning.
!!! note "This is a Note Card" This callout contains a note.
???+ question "This Question Can Be Contracted" This is expanded by default (but can be contracted).
??? tip "This Tip is Contracted (By Default)" This is contracted by default (but can be expanded).
Particularly useful for code blocks for different programming languages or platforms, but could have many other users.
=== "Mac OS & Linux"
```bash
# Extract the tar archive into your ~/downloads directory
tar -xvf my-bundle.tar -C ./downloads
```
=== "Windows"
```powershell
# Extract the zip
Expand-Archive .\my-bundle.zip
```
=== "Text"
You can have what you like in here, just like an admonition. It doesn't *have* to be code blocks :smile:.
Subscribe to our newsletter{ .md-button }
!!! note "More diagrams and examples" You can find much more information about PlantUML and samples to try on their website. Use the links at the top of the page for samples.
Lorem ipsum1 dolor sit amet, consectetur adipiscing elit.2
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.
==}
-
==This was marked==
-
^^This was inserted^^
-
This was deleted -
Subtext H
2O -
Supertext A^T^A
Automatic rendering of Markdown task lists.
- Phase 1
- Phase 2
- Phase 3
😄 You can use Emoji's in your writing! Find the shortcodes here ❤️.
You can align and resize images.
=== "Image LEFT"
{ align=left }
=== "Image RIGHT"
{ align=right }
=== "Image RESIZE"
{ align=right width="200" }
You can add captions to your images.
{ width="300" } This image now has a caption.Below is a "definition list." Notice the indentation...
Lorem ipsum dolor sit amet
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.
Cras arcu libero
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.
Below is a task list, with done and not done items...
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Vestibulum convallis sit amet nisi a tincidunt
- Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
-
attributes -
customerfirst_nametest
family_nameemail
-
personfirst_namefamily_namebirth_date
-
subscription_id -
request
Links can have tool tips.
Link with tooltip (using the separate 'reference' syntax).
!!! note "Example Download Link"
Download links can be created using the {: download } attribute. The syntax is:
```markdown
[Link Text](../images/homepage.png){: download }
```
Note: The file must exist in your repository for the download to work.
Define an abbreviation once and wherever it appears on the page it will be underlined. Hover over the underlined abbreviation and the expanded abbreviation is shown as a tool tip. No more wondering what "CNCF" stands for!
*[CNCF]: Cloud Native Computing Foundation