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

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 has the following type: dict containing keys ‘theme’. Those keys have the following types:

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

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.

loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys ‘is_loading’, ‘prop_name’, ‘component_name’. Those keys have the following types:

  • is_loading (boolean; optional): Determines if the component is loading or not
  • prop_name (string; optional): Holds which property is loading
  • component_name (string; optional): Holds the name of the component that is loading

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