Search⌘ K
Home/
Courses/
Interactive Dashboards and Data Apps with Plotly and Dash

Creating a Markdown Component

Learn how to design and add Markdown components to applications using the dash_core_components package.

We'll cover the following...

Let’s see how we can add formatted text using the Markdown component.

Markdown vs. HTML

Markdown is a way to produce HTML in a manner that is easy to write and also easy to read. The output would be displayed as any HTML document would, but the process of writing it and reading it is much easier. Compare the following two snippets, which result in the same HTML output. Using pure HTML, we would write the following:

C++
<h1>This is the main text of the page</h1>
<h3>This is secondary text</h2>
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

The same code can be written with Markdown as follows:

C++
# This is the main text of the page
### This is secondary text
* first item
* second item
* third item

It’s clear that Markdown is much easier to write, as well as to read, especially when items are nested like the <ul> unordered list we have here.

The Markdown component works the same way. The preceding code simply has to be passed to the children argument, which would render it as the HTML shown previously.

Creating a basic application with a Markdown component

Let’s create a minimal app in JupyterLab to see how the Markdown component works.

C++
from jupyter_dash import JupyterDash
import dash_core_components as dcc
app = JupyterDash(__name__)
app.layout = html.Div([])
dcc.Markdown("""
# This is the main text of the page
### This is secondary text
* first item
* second item
* third item
""")
app.run_server(mode='inline')
  • Lines 1–3: We make the necessary imports and instantiate an app.
  • Line 5: We create the layout attribute of the app.
  • Lines 7–13: We pass the Markdown component with the preceding text to the div just created. Note that it’s easier to use triple quotes especially when using multiline text
  • Line 15: We run the app.

The preceding code creates a mini-app with its ...