Markdown

Hello, Markdown!

Use marimo’s “md” function to embed rich text into your marimo apps. This function compiles Markdown into HTML that marimo can display.

For example, here’s the code that rendered the above title and paragraph:

mo.md(
    '''
    # Hello, Markdown!

    Use marimo's "`md`" function to embed rich text into your marimo
    apps. This function compiles your Markdown into HTML that marimo
    can display.
    '''
)

LaTeX

You can embed LaTeX in Markdown.

For example,

mo.md(r'$f : \mathbf{R} \to \mathbf{R}$')

renders \(f : \mathbf{R} \to \mathbf{R}\), while

mo.md(
    r'''
    \[
    f: \mathbf{R} \to \mathbf{R}
    \]
    '''
)

renders the display math

[ f: . ]

Use r'' strings to remove the need to escape backslashes when writing LaTeX.

Interpolating Python values

You can interpolate Python values into markdown using f-strings and marimo’s as_html function. This lets you create markdown whose contents depend on data that changes at runtime.

Here are some examples.

Plots

A matplotlib figure:

_x = np.linspace(start=0, stop=2*np.pi)
sine_plot = plt.plot(_x, np.sin(_x))
mo.md(f"{mo.as_html(sine_plot)}")

yields

UI elements

A marimo.ui object:

leaves = mo.ui.slider(1, 16, label="🍃: ")
mo.md(f"{leaves}")

yields Your leaves: 🍃

marimo objects know how to format themselves, so you can omit the call to as_html.

Other objects

Use mo.as_html to convert objects to HTML. This function generates rich HTML for many Python types, including:

• lists, dicts, and tuples,
• pandas dataframes and series,
• seaborn figures,
• plotly figures, and
• altair figures.

For example, here's a pandas dataframe:

	x	sin(x)
0	0.000000	0.000000e+00
1	0.698132	6.427876e-01
2	1.396263	9.848078e-01
3	2.094395	8.660254e-01
4	2.792527	3.420201e-01
5	3.490659	-3.420201e-01
6	4.188790	-8.660254e-01
7	4.886922	-9.848078e-01
8	5.585054	-6.427876e-01
9	6.283185	-2.449294e-16

mo.as_html is only needed when interpolating objects into markdown; the last expression of a cell (its output) is converted to HTML automatically.

Putting it all together

Here’s a more interesting example that puts together everything we’ve learned: rendering markdown with LaTeX that depends on the values of Python objects.

A sin curve.

You're viewing the graph of ||[ f(x) = 1.0\sin((2\pi/6.28)x), ||]with ||(x||) ranging from ||(0||) to ||(2\pi||).