The Markdown component is part of the dash_core_components package. It offers a simplistic and more convenient way of writing and reading HTML. The idea behind the Markdown component was to produce the output of an HTML document without the complexity of its syntax. To give you an idea, the widget below provides a vivid contrast between the two code snippets that produce the same output.
First, have a look at what the layout would look like using HTML:
<h1>Page Heading</h1><h3>Sub-heading</h3><ul><li> First Point</li><li> Second Point</li><li> Third Point</li></ul>
Now, have a look at how the same layout can be created using the Markdown component:
# Page Heading### Sub-heading* First Point* Second Point* Third Point
It should be evident by comparing the two pieces of code that Markdown is a more flexible and convenient way to design the layout of applications compared to HTML.
Markdown component in a simple Dash applicationWe will now create a basic dash application to demonstrate the functionality of the Markdown component discussed earlier in the lesson.
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
app = JupyterDash(__name__)
app.layout = html.Div([
dcc.Markdown("""
# Page Heading
### Sub-heading
* First Point
* Second Point
* Third Point
""")
])
app.run_server(host='0.0.0.0',port=8050)Note: The working example set up above uses
python3to execute the dash application.
Lets discuss the aobove code in detail:
Lines 1–3: We import the required libraries for the application.
Line 4: We initialize the app.
Lines 5–13: These lines of code define the layout of the application. The layout contains a single div element with the code for our Markdown component.
Line 14: We run the server for the application.
Free Resources