dcc.Markdown

dcc.Markdown is a component for rendering Markdown in your Dash app.

Examples

Find a few usage examples below.

For more examples of minimal Dash apps that use dcc.Markdown, go to the community-driven Example Index.

Headers

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''

    # This is an <h1> tag

    ## This is an <h2> tag

    ###### This is an <h6> tag
''')


if __name__ == '__main__':
    app.run(debug=True)

This is an <h1> tag

This is an <h2> tag

This is an <h6> tag

Emphasis

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''
    *This text will be italic*

    _This will also be italic_


    **This text will be bold**

    __This will also be bold__

    _You **can** combine them_
''')


if __name__ == '__main__':
    app.run(debug=True)

This text will be italic

This will also be italic

This text will be bold

This will also be bold

You can combine them

Lists

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''
    * Item 1
    * Item 2
    * Item 2a
    * Item 2b
''')


if __name__ == '__main__':
    app.run(debug=True)
  • Item 1
  • Item 2
  • Item 2a
  • Item 2b

Block Quotes

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''
    >
    > Block quotes are used to highlight text.
    >
''')


if __name__ == '__main__':
    app.run(debug=True)

Block quotes are used to highlight text.

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''
    [Dash User Guide](/)
''')


if __name__ == '__main__':
    app.run(debug=True)

link_target is available in Dash 2.4 and later.

Using link_target you can set the HTML target attribute for links in your Markdown component.
In this example, we set link_target="_blank". When selected, the Dash User Guide link now opens in a new tab or window.

from dash import Dash, dcc

app = Dash(__name__)

app.layout = dcc.Markdown('''
    [Dash User Guide](/)
''',
    link_target="_blank",
)


if __name__ == "__main__":
    app.run(debug=True)

Inline Code

Text surrounded by single backticks (`) renders as inline code.

from dash import Dash, dcc

app = Dash(__name__)


app.layout = dcc.Markdown('''

Inline code snippet: `my_bool = True`

Block code snippet:
```python

def sum(a, b):
    return a+b

sum(2,2)

```''')


if __name__ == '__main__':
    app.run(debug=True)

Inline code snippet: my_bool = True

Block code snippet:


def sum(a, b):
    return a+b

sum(2,2)

Only certain languages are supported by default in dcc.Markdown. For more details about how to customize the
languages and color schemes, refer to Syntax Highlighting With Markdown
in Adding CSS & JS and Overriding the Page-Load Template.

LaTeX

dcc.Markdown supports rendering LaTeX. It uses MathJax version 3.2 and can be enabled by setting mathjax=True on the component. For inline math content, use $ delimiters. For math content that you want to display as a block (usually multi-line content), use $$. If you need a literal $, use the HTML entity &#36;

from dash import Dash, dcc, html
import plotly.express as px

fig = px.line(x=[1, 2, 3, 4], y=[1, 4, 9, 16], title=r'$\alpha_{1c} = 352 \pm 11 \text{ km s}^{-1}$')
fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$')

app = Dash(__name__)

app.layout = html.Div([dcc.Markdown('''
    ## Introducing LaTeX using MathJax:

    This example uses the block delimiter:
    $$
    \\frac{1}{(\\sqrt{\\phi \\sqrt{5}}-\\phi) e^{\\frac25 \\pi}} =
    1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}}
    {1+\\frac{e^{-8\\pi}} {1+\\ldots} } } }
    $$

    This example uses the inline delimiter:
    $E^2=m^2c^4+p^2c^2$

    ### LaTeX in a Graph component:

    ''', mathjax=True),

    dcc.Graph(mathjax=True, figure=fig)
    ])

if __name__ == '__main__':
    app.run(debug=True)

Introducing LaTeX using MathJax:

This example uses the block delimiter:
$$
\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }
$$

This example uses the inline delimiter:
$E^2=m^2c^4+p^2c^2$

LaTeX in a Graph component:

For an introduction to LaTeX math, see LaTeX/Mathematics.


Markdown Properties

Access this documentation in your Python terminal with:
```python

help(dash.dcc.Markdown)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

children (string | list of strings; optional):
A markdown string (or array of strings) that adheres to the CommonMark
spec.

id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

className (string; optional):
Class name of the container element.

mathjax (boolean; default False):
If True, loads mathjax v3 (tex-svg) into the page and use it in the
markdown.

dangerously_allow_html (boolean; default False):
A boolean to control raw HTML escaping. Setting HTML from code is
risky because it’s easy to inadvertently expose your users to a
cross-site scripting (XSS)
(https://en.wikipedia.org/wiki/Cross-site_scripting) attack.

link_target (string; optional):
A string for the target attribute to use on links (such as “_blank”).

dedent (boolean; default True):
Remove matching leading whitespace from all lines. Lines that are
empty, or contain only whitespace, are ignored. Both spaces and tab
characters are removed, but only if they match; we will not convert
tabs to spaces or vice versa.

highlight_config (dict; optional):
Config options for syntax highlighting.

highlight_config is a dict with keys:

  • theme (a value equal to: ‘dark’ or ‘light’; optional):
    Color scheme; default ‘light’.

loading_state (dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a dict with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (boolean; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

style (dict; optional):
User-defined inline styles for the rendered Markdown.