Extensions¶

Admonition - Block styled content¶

# location: mkdocs.yml
markdown_extensions:
  - admonition

!!! info "Info"
    This is an admonition box.

!!! important "Important"
    This is an admonition box.

!!! warning "Warning"
    This is an admonition box.

!!! success "Success"
    This is an admonition box.

!!! check ""
    This is an admonition box without a title.

!!! danger "Danger"
    This is an admonition box.

!!! danger "Failure"
    This is an admonition box.

!!! Example "Default"
    This is the default box

Language highlight¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences

def fun():
    print("holis")

kubectl apply -f manifest.yml

Line highlight¶

You can highlight using the output is like:

Footnotes¶

# location: mkdocs.yml
markdown_extensions:
  - footnotes

All the other pages are for¹ demonstration purposes with the navigation only.

All the other pages are for[^1] demonstration purposes
with the navigation only.

[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Keyboard¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.keys

Use keyboard values: Ctrl+Alt+Del

++ctrl+alt+delete++

Critics¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.critic

To insert or remove text you can use {++insert me++} and {--remove me--} respectively. You can also denote a substitution with {~~substitute this~>with this~~}.

You can also highlight specific text with {==highlight me==}. Or even comment, which is generally done by highlighting text and following it with a comment: {==highlight me}{>>Add a comment<<}.

To insert or remove text you can use insert me and remove me respectively. You can also denote a substitution with substitute thiswith this.

You can also highlight specific text with highlight me. Or even comment, which is generally done by highlighting text and following it with a comment: highlight meAdd a comment.

Emojis¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.emoji

You can also use emojis:

:smile: :heart:

Mark¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.mark

Ability to add <mark></mark> by using ==hello== hello

Smart symbols¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.smartsymbols

KPN ™

I'd say ±8

KPN (tm)
I'd say +/-8

Tasklist¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.tasklist

Task List

• item 1
• item A
• item B more text
  • item a
  • item b
  • item c
• item C
• item 2
• item 3

Tilde¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.tilde

Delete me

CH₃CH₂OH

text_{a subscript}

~~Delete me~~

CH~3~CH~2~OH

text~a\ subscript~

More¶

Read more about the extensions in pymdown-extensions

Content tabs¶

# location: mkdocs.yml
markdown_extensions:
  - pymdownx.tabbed

=== "JS"

    ```js
    date = new Date()
    ```

=== "Python"

    ```python
    import datetime
    datetime.datetime.now()
    ```

=== "List"
    More Markdown **content**.

    - list item a
    - list item b

date = new Date()

import datetime
datetime.datetime.now()

PlantUML diagrams¶

This is a C4 model example

```plantuml format="png" classes="uml myDiagram" alt="My super diagram placeholder" title="C4 Model"
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
!include DEVICONS/react.puml
!include DEVICONS/python.puml
!include DEVICONS/postgresql.puml
!include FONTAWESOME/users.puml

LAYOUT_WITH_LEGEND()

Person(user, "Customer", "People that need products", $sprite="users")
Container(spa, "SPA", "react", "The main interface that the customer interacts with", $sprite="react")
Container(api, "API", "python", "Handles all business logic", $sprite="python")
ContainerDb(db, "Database", "Postgres SQL", "Holds product, order and invoice information", $sprite="postgresql")

Rel(user, spa, "Uses", "https")
Rel(spa, api, "Uses", "https")
Rel_R(api, db, "Reads/Writes")
@enduml
```

Add to mkdocs.yml

markdown_extensions:
- plantuml_markdown:
      server: http://www.plantuml.com/plantuml

Check plantum-markdown is installed by running: pip freeze | grep plantuml-markdown

If not present, run:

pip install -U plantuml-markdown

VS code extension for PlantUML

Mermaid diagrams¶

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

You may need to add the following to your configuration if it doesn't work right away

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
          - name: mermaid
            class: mermaid
            format: !!python/name:pymdownx.superfences.fence_div_format