Render admonitions with some style

articles/assets.py

@@ -3,6 +3,7 @@ from django_assets import Bundle, register
 public_no_code = Bundle(
     "vendor/newcss.css",
     "public.css",
+    "admonitions.css",
     filters="rcssmin",
     output="public_bundled.css",
 )
@@ -10,6 +11,7 @@ public_with_code = Bundle(
     "vendor/newcss.css",
     "vendor/codehilite.css",
     "public.css",
+    "admonitions.css",
     filters="rcssmin",
     output="public_code_bundled.css",
 )

articles/models.py

@@ -34,6 +34,7 @@ def format_article_content(content):
     md = markdown.Markdown(
         extensions=[
             "extra",
+            "admonition",
             CodeHiliteExtension(linenums=False, guess_lang=False),
             LazyLoadingImageExtension(),
         ]

articles/static/admonitions.css

@@ -0,0 +1,65 @@
+:root {
+    --info-background: #d1ecf1;
+    --info-text: #0c5460;
+    --success-background: #d4edda;
+    --success-text: #155724;
+    --danger-background: #f8d7da;
+    --danger-text: #721c24;
+    --warning-background: #fff3cd;
+    --warning-text: #856404;
+}
+
+@media(prefers-color-scheme: dark) {
+    :root {
+        --info-background: #0c5460;
+        --info-text: #d1ecf1;
+        --success-background: #155724;
+        --success-text: #d4edda;
+        --danger-background: #721c24;
+        --danger-text: #f8d7da;
+        --warning-background: #856404;
+        --warning-text: #fff3cd;
+    }
+}
+
+.admonition-title {
+    font-weight: bold;
+    margin-bottom: 0;
+}
+
+.admonition {
+    background-color: var(--nc-bg-2);
+    box-shadow: 0 0 8px -1px var(--nc-bg-3);
+    border: 1px solid var(--nc-bg-3);
+    padding: 1ex;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.admonition > :last-child {
+    margin-bottom: 0;
+}
+
+.admonition.info {
+    --nc-bg-2: var(--info-background);
+    --nc-bg-3: var(--info-text);
+    color: var(--info-text);
+}
+
+.admonition.success {
+    --nc-bg-2: var(--success-background);
+    --nc-bg-3: var(--success-text);
+    color: var(--success-text);
+}
+
+.admonition.warning {
+    --nc-bg-2: var(--warning-background);
+    --nc-bg-3: var(--warning-text);
+    color: var(--warning-text);
+}
+
+.admonition.danger {
+    --nc-bg-2: var(--danger-background);
+    --nc-bg-3: var(--danger-text);
+    color: var(--danger-text);
+}