Markdown¶
Write markdown with mo.md
; make your markdown interactive, dynamic,
and visually rich by interpolating arbitrary Python values and marimo
elements.
- marimo.md(text: str) Html ¶
Write markdown
This function takes a string of markdown as input and returns an Html object. Output the object as the last expression of a cell to render the markdown in your app.
Interpolation.
You can interpolate Python values into your markdown strings, for example using f-strings. Html objects and UI elements can be directly interpolated. For example:
text_input = mo.ui.text() md(f"Enter some text: {text_input}")
For other objects, like plots, use marimo’s
as_html
method to embed them in markdown:import matplotlib.pyplot as plt plt.plot([1, 2]) axis = plt.gca() md(f"Here's a plot: {mo.as_html(axis)}")
LaTeX.
Enclose LaTeX in single ‘$’ signs for inline math, and double ‘$$’ for display math or square brackets for display math. (Use raw strings, prefixed with an “r”, to use single backslashes.) For example:
mo.md( r''' The exponential function $f(x) = e^x$ can be represented as \[ f(x) = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \ldots. \] ''' )
renders:
The exponential function
can be represented asArgs:
text
: a string of markdown
Returns:
An
Html
object.
Icons¶
We support rendering icons from Iconify.
When is inside markdown, you can render an icon with the syntax ::iconset:icon-name::
for example ::lucide:rocket::
or ::mdi:home::
. This is useful for quickly adding an icon, however, it does not support advanced configuration such as size, color, and rotation.
For other advanced features, use mo.icon()
such as mo.icon("lucide:rocket", size=20)
or mo.icon("mdi:home", color="blue")
.
- marimo.icon(icon_name: str, *, size: int | None = None, color: str | None = None, inline: bool = True, flip: Literal['horizontal', 'vertical', 'horizontal,vertical'] | None = None, rotate: Literal['90deg', '180deg', '270deg'] | None = None, style: dict[str, Union[str, int, float, NoneType]] | None = None) Html ¶
Displays an icon. These icons are referenced by name from the Iconify library.
They are named in the format
icon-set:icon-name
, e.g.lucide:leaf
.Icons are lazily loaded from a CDN, so they will not be loaded when not connected to the internet.
These can be used in buttons, tabs, and other UI elements.
Examples.
mo.md(f"# {mo.icon('lucide:leaf')} Leaf") mo.ui.button( label=f"{mo.icon('lucide:rocket')} Submit", )
Args.
icon_name
: the name of the icon to displaysize
: the size of the icon in pixelscolor
: the color of the iconinline
: whether to display the icon inline or as a block elementflip
: whether to flip the icon horizontally, vertically, or bothrotate
: whether to rotate the icon 90, 180, or 270 degreesstyle
: a dictionary of CSS styles to apply to the icon
Returns.
An
Html
object.
Tooltips¶
You can render a tooltip by adding the data-tooltip
attribute to an element.
mo.md(
'''
<div data-tooltip="This is a tooltip">Hover over me</div>
'''
)
mo.ui.button(
label='<div data-tooltip="This is a tooltip">Hover over me</div>'
)