feat: admonition in markdown (marimo-team#1447)

* feat: admonition in markdown * fixes
PatrickCleary · May 22, 2024 · bb24d0f · bb24d0f
1 parent b71e1d9
commit bb24d0f
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 0 deletions.
diff --git a/frontend/src/css/admonition.css b/frontend/src/css/admonition.css
@@ -0,0 +1,96 @@
+.admonition {
+  --admonition-bg: var(--blue-1);
+  --admonition-border: var(--blue-6);
+  --admonition-heading-color: var(--blue-11);
+
+  display: flex;
+  padding: 1rem;
+  border-left: 4px solid;
+  margin-bottom: 1rem;
+  background-color: var(--admonition-bg);
+  border-color: var(--admonition-border);
+
+  &::before {
+    margin-top: 0.35rem;
+    margin-right: 1rem;
+  }
+}
+
+.admonition-title {
+  font-weight: bold;
+  text-transform: capitalize;
+  color: var(--admonition-heading-color);
+
+  @apply tracking-wide;
+
+  .paragraph {
+    font-weight: initial;
+    @apply text-foreground tracking-normal;
+  }
+}
+
+/* Icons from https://lucide.dev/icons/ */
+
+.admonition.info,
+.admonition.note {
+  --admonition-bg: var(--blue-1);
+  --admonition-border: var(--blue-6);
+  --admonition-heading-color: var(--blue-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+  }
+}
+
+.admonition.danger,
+.admonition.caution,
+.admonition.error {
+  --admonition-bg: var(--red-1);
+  --admonition-border: var(--red-6);
+  --admonition-heading-color: var(--red-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>');
+  }
+}
+
+.admonition.attention,
+.admonition.warning {
+  --admonition-bg: var(--yellow-1);
+  --admonition-border: var(--yellow-6);
+  --admonition-heading-color: var(--yellow-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
+  }
+}
+
+.admonition.hint {
+  --admonition-bg: var(--gray-1);
+  --admonition-border: var(--gray-6);
+  --admonition-heading-color: var(--gray-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+  }
+}
+
+.admonition.important {
+  --admonition-bg: var(--cyan-1);
+  --admonition-border: var(--cyan-6);
+  --admonition-heading-color: var(--cyan-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>');
+  }
+}
+
+.admonition.tip {
+  --admonition-bg: var(--grass-1);
+  --admonition-border: var(--grass-6);
+  --admonition-heading-color: var(--grass-11);
+
+  &::before {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
+  }
+}
diff --git a/frontend/src/css/globals.css b/frontend/src/css/globals.css
@@ -8,6 +8,8 @@
 @import url("@radix-ui/colors/red-dark.css");
 @import url("@radix-ui/colors/sky.css");
 @import url("@radix-ui/colors/sky-dark.css");
+@import url("@radix-ui/colors/cyan.css");
+@import url("@radix-ui/colors/cyan-dark.css");
 @import url("@radix-ui/colors/slate.css");
 @import url("@radix-ui/colors/slate-dark.css");
 @import url("@radix-ui/colors/sage.css");

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
@@ -4,4 +4,5 @@
 @import url("./katex-fonts.css");
 @import url("./katex.min.css");
 @import url("./md.css");
+@import url("./admonition.css");
 @import url("./table.css");
diff --git a/marimo/_output/md.py b/marimo/_output/md.py
@@ -55,6 +55,8 @@ def _md(text: str, apply_markdown_class: bool = True) -> Html:
             "toc",
             # Footnotes
             "footnotes",
+            # Admonitions
+            "admonition",
             # Links
             ExternalLinksExtension(),
         ],

diff --git a/marimo/_smoke_tests/admonitions.py b/marimo/_smoke_tests/admonitions.py
@@ -0,0 +1,65 @@
+import marimo
+
+__generated_with = "0.6.0"
+app = marimo.App()
+
+
+@app.cell
+def __():
+    import marimo as mo
+    return mo,
+
+
+@app.cell
+def __(mo):
+    kinds = [
+        # ---
+        "info",
+        "note",
+        # ---
+        "danger",
+        "error",
+        "caution",
+        # ---
+        "hint",
+        # ---
+        "important",
+        # ---
+        "tip",
+        # ---
+        "attention",
+        "warning",
+    ]
+
+    def create(kind):
+        return mo.md(
+        rf"""
+
+            !!! {kind} "{kind} admonition"
+                This is an admonition for {kind}
+            """
+        )
+
+    mo.vstack([create(kind) for kind in kinds])
+    return create, kinds
+
+
+@app.cell
+def __(mo):
+    mo.md("# Misc")
+    return
+
+
+@app.cell
+def __(mo):
+    mo.md(
+        rf"""
+        !!! important ""
+            This is an admonition box without a title.
+        """
+    )
+    return
+
+
+if __name__ == "__main__":
+    app.run()