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 \(f(x) = e^x\) can be represented as

\[f(x) = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \ldots.\]

Args:

• 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 display

• size: the size of the icon in pixels

• color: the color of the icon

• inline: whether to display the icon inline or as a block element

• flip: whether to flip the icon horizontally, vertically, or both

• rotate: whether to rotate the icon 90, 180, or 270 degrees

• style: 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>'
)