Admonition CSS demo (with flask and python-markdown)

main.py

from flask import Flask
import markdown

app = Flask(__name__)

your_text_string = """
# Coucou

## Hello

- [x] This is a complete item
- [ ] This is an incomplete item
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported


## World

1. Item 1
    - Item 1a
    - Item 1b
2. Item 2
    - Item 2a
    - Item 2b
3. Item 3

## Admonition

!!! note "My Note"
    This is a note

!!! abstract "My Abstract"
    This is an abstract

!!! info "My Info"
    This is an info

!!! tip "My Tip"
    This is a tip

!!! success "My Success"
    This is a success

!!! question "My Question"
    This is a question

!!! warning "My Warning"
    This is a warning

!!! failure "My Failure"
    This is a failure

!!! danger "My Danger"
    This is a danger

!!! bug "My Bug"
    This is a bug

!!! example "My Example"
    This is an example

!!! quote "My Quote"
    This is a quote

!!! note "My Code"
    This is a code

    ```python
    print("Hello World")
    ```

!!! note "My Table"
    This is a table

    | Tables        | Are           | Cool  |
    | ------------- |:-------------:| -----:|
    | col 3 is      | right-aligned | $1600 |
    | col 2 is      | centered      |   $12 |
    | zebra stripes | are neat      |    $1 |

!!! note "My List"
    This is a list

    - Item 1
    - Item 2
    - Item 3

!!! note "My very long line"
    This is a very long line aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

"""

style = """
.admonition {
    border: 2px solid; /* Border around the whole admonition */
    border-left: 8px solid; /* Accentuated left border, color set in classes below */
    background-color: #f8f9fa; /* Light background color */
    padding: 0.5em 1em; /* Some padding */
    margin: 1.5em;
    border-radius: 4px;
    width: fit-content;
    max-width: 70%;
    overflow: wrap;
    word-wrap: break-word;
}

.admonition-title {
    font-weight: bold;
    margin-bottom: .5em;
}

/* You can customize these with the specific colors you want for each type */
.admonition.note {
    border-color: #448aff; /* Blue for note */
    background-color: #448aff1a; /* Light blue for note */
}

.admonition.abstract {
    border-color: #00b0ff; /* Light blue for abstract */
    background-color: #00b0ff1a; /* Light blue for abstract */
}

.admonition.info {
    border-color: #00b8d4; /* Cyan for info */
    background-color: #00b8d41a; /* Light cyan for info */
}

.admonition.tip {
    border-color: #00bfa5; /* Teal for tip */
    background-color: #00bfa51a; /* Light teal for tip */
}

.admonition.success {
    border-color: #00c853; /* Green for success */
    background-color: #00c8531a; /* Light green for success */
}

.admonition.question {
    border-color: #64dd17; /* Light green for question */
    background-color: #64dd171a; /* Light green for question */
}

.admonition.warning {
    border-color: #ff9100; /* Orange for warning */
    background-color: #ff91001a; /* Light orange for warning */
}

.admonition.failure {
    border-color: #ff5252; /* Red for failure */
    background-color: #ff52521a; /* Light red for failure */
}

.admonition.danger {
    border-color: #ff1744; /* Dark red for danger */
    background-color: #ff17441a; /* Light dark red for danger */
}

.admonition.bug {
    border-color: #f50057; /* Pink for bug */
    background-color: #f500571a; /* Light pink for bug */
}

.admonition.example {
    border-color: #7c4dff; /* Purple for example */
    background-color: #7c4dff1a; /* Light purple for example */
}

.admonition.quote {
    border-color: #9e9e9e; /* Grey for quote */
    background-color: #9e9e9e1a; /* Light grey for quote */
}

ul {
  list-style-type: square !important;
  padding-left: 2rem !important; /* equivalent to Tailwind's pl-8 */
}

ol {
  list-style-type: decimal !important;
  padding-left: 2rem !important; /* equivalent to Tailwind's pl-8 */
}
"""

script = ""

@app.route("/")
def hello_world():
    return f"""
    <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <style>
            {style}
        </style>
        <srcipt>
            {script}
        </script>

    </head>
    <body>
        {markdown.markdown(your_text_string, extensions=['extra', 'admonition'])}
    </body>
    </html>
    """