Markdown¶

Write markdown with mo.md; make your markdown interactive, dynamic, and visually rich by interpolating arbitrary Python values and marimo elements.

marimo.md ¶

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(
    icon_name: str,
    *,
    size: Optional[int] = None,
    color: Optional[str] = None,
    inline: bool = True,
    flip: Optional[
        Literal[
            "horizontal", "vertical", "horizontal,vertical"
        ]
    ] = None,
    rotate: Optional[
        Literal["90deg", "180deg", "270deg"]
    ] = None,
    style: Optional[
        dict[str, Union[str, int, float, 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",
)

PARAMETER	DESCRIPTION
`icon_name`	the name of the icon to display TYPE: `str`
`size`	the size of the icon in pixels TYPE: `Optional[int]` DEFAULT: `None`
`color`	the color of the icon TYPE: `Optional[str]` DEFAULT: `None`
`inline`	whether to display the icon inline or as a block element TYPE: `bool` DEFAULT: `True`
`flip`	whether to flip the icon horizontally, vertically, or both TYPE: `Optional[Literal['horizontal', 'vertical', 'horizontal,vertical']]` DEFAULT: `None`
`rotate`	whether to rotate the icon 90, 180, or 270 degrees TYPE: `Optional[Literal['90deg', '180deg', '270deg']]` DEFAULT: `None`
`style`	a dictionary of CSS styles to apply to the icon TYPE: `Optional[dict[str, Union[str, int, float, None]]]` DEFAULT: `None`

RETURNS	DESCRIPTION
`Html`	An `Html` object. TYPE: `Html`

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>'
)