Markdown Examples and Reference

Headers

import dash_core_components as dcc

dcc.Markdown('''

# This is an <h1> tag

## This is an <h2> tag

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

This is an <h1> tag

This is an <h2> tag

This is an <h6> tag

Emphasis

import dash_core_components as dcc

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

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

import dash_core_components as dcc

dcc.Markdown('''
* Item 1
* Item 2
  * Item 2a
  * Item 2b
''')
  • Item 1
  • Item 2
  • Item 2a
  • Item 2b

Block Quotes

import dash_core_components as dcc

dcc.Markdown('''
>
> Block quotes are used to highlight text.
>

''')

Block quotes are used to highlight text.


Links

import dash_core_components as dcc

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

Inline Code

Any block of text surrounded by ` ` will rendered as inline-code.

import dash_core_components as dcc

dcc.Markdown('''

Inline code snippet: `True`

Block code snippet:
```py
import dash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
```
''')

Inline code snippet: True

Block code snippet:

import dash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

Only certain languages are supported by default in
dcc.Markdown. For more details about how to customize the
languages and colour schemes, please see “Syntax Highlighting
With
Markdown”
.

dcc.Markdown Properties

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

help(dash_core_components.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 adhreres 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.

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.

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’, ‘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.