Extensions

Admonition - Block styled content

# location: mkdocs.yml
markdown_extensions:
  - admonition

Info

This is an admonition box.

Important

This is an admonition box.

Warning

This is an admonition box.

Success

This is an admonition box.

This is an admonition box without a title.

Danger

This is an admonition box.

Failure

This is an admonition box.

!!! 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.

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 for1 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

CH3CH2OH

texta 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()

More Markdown content.

  • list item a
  • list item b

PlantUML diagrams

This is a C4 model example

My super diagram placeholder

```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


  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.