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.

Loading LaTeX macros¶

You can load LaTeX macros using mo.latex(filename=...).

marimo.latex ¶

latex(*, filename: Union[str, Path]) -> None

Load LaTeX from a file or URL.

import marimo as mo

mo.latex(filename="macros.tex")

or

import marimo as mo

mo.latex(filename="https://example.com/macros.tex")

Args: - filename: Path to a LaTeX file

Returns: - An Html object

Side effects

The mo.latex() function has side effects (registering the LaTeX macros) and should be used in the same cell as import marimo. Otherwise, the LaTeX macros may not be loaded before the cells that use them.

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

Rendering images¶

You can render images from a local public/ folder:

mo.md(
    '''
    <img src="public/image.png" width="100" />
    '''
)

See Static files for information about serving images and other static assets.