Master Dash Static Components and Build a 60‑Line Online Markdown Editor

Introduction

This article is part of a series on "Python+Dash rapid web application development". It focuses on practical static components in Dash that help build formal web applications, culminating in a 60‑line online Markdown editor.

Basic Static Components in Dash

Static components primarily display content without direct interaction. Examples include headings, line breaks, horizontal rules, paragraphs, links, and text formatting tags.

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container([
        html.Br(),
        html.H1('静态部件示例'),
        html.H2('这是二级标题'),
        html.H3('这是三级标题'),
        html.H4('这是四级标题'),
        html.P([
            '这是一个',
            html.A('链接', href='#'),
            '，而这是一段',
            html.Strong('加粗文字'),
            '，这是一段带上下标的文字：',
            '测试',
            html.Sup('上标'),
            '，测试',
            html.Sub('下标')
        ]),
        html.Br(),
        html.H1('交互部件示例'),
        dcc.Dropdown(options=[{'label':'测试1','value':'测试1'},{'label':'测试2','value':'测试2'},{'label':'测试3','value':'测试3'}]),
        html.Br(),
        dcc.Checklist(options=[{'label':'测试1','value':'测试1'},{'label':'测试2','value':'测试2'},{'label':'测试3','value':'测试3'}], value=['测试1']),
        html.Br(),
        dcc.RangeSlider(min=0, max=20, step=0.5, value=[5,15])
    ])
)

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

These static components correspond to standard HTML elements and are used for layout and content presentation.

Common Static Components

Text‑Related Components

H1() to H6() : Correspond to HTML headings.

Br() and Hr() : Line break and horizontal rule.

P() : Paragraph.

A() : Hyperlink with href, target, etc.

I(), Code(), U(), Mark() : Italic, code snippet, underline, and highlighted text.

Content‑Organization Components

Blockquote() : Render block quotes similar to markdown >.

Ol() and Li() : Ordered list.

Ul() and Li() : Unordered hierarchical list.

Img() : Image rendering via src.

Audio() and Video() : Media playback with controls=True.

Iframe() : Embed external webpages.

Textarea() : Large text input, used with dcc.Textarea() for callbacks.

Special Static Component: dcc.Markdown()

Dash provides dcc.Markdown() to render markdown content. Important parameters include:

children : markdown source string.

dangerously_allow_html : Whether to render embedded HTML (default False).

dedent : Whether to ignore leading indentation (default True).

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container([
        dcc.Markdown('''
> Example markdown content
# Heading 1
## Heading 2
''', dangerously_allow_html=True, dedent=False)
    ])
)

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

Building an Online Markdown Editor with Dash

Using dcc.Textarea() as the input component (its value property serves as a callback Input) and dcc.Markdown() as the output component (its children property serves as a callback Output), we can create a live Markdown previewer.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        dbc.Row([
            dbc.Col(
                dcc.Textarea(id='md-input', placeholder='Enter markdown...', style={'width':'100%','height':'100%'}),
                width=6,
                style={'padding-right':0,'border':'5px solid red'}
            ),
            dbc.Col(
                dcc.Markdown(id='md-output', dangerously_allow_html=True, style={'position':'absolute','width':'100%','height':'100%'}),
                width=6,
                style={'position':'relative','overflow':'auto','padding-left':0}
            )
        ], style={'position':'fixed','top':0,'bottom':0,'left':0,'right':0})
    ),
    style={'font-size':'2rem'}
)

@app.callback(Output('md-output','children'), Input('md-input','value'))
def online_markdown(raw_text):
    return raw_text

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

The result is a responsive interface where users type Markdown on the left and see the rendered output on the right in real time.

Future tutorials will explore more advanced and richer static components in Dash.