60行Python代码开发在线markdown编辑器

朱雀 2022-10-21 03:55 122阅读 0赞

本文转载自公众号【python大数据分析】，详情可以点击上方卡片，关注该公众号，获取更多好文推荐。

> ❝
> 
> 本文示例代码已上传至我的`Github`仓库https://github.com/CNFeffery/DataScienceStudyNotes
> 
> ❞

# 1 简介 #

这是我的系列教程**「Python+Dash快速web应用开发」**的第六期，在上一期的文章中，我们完成了对`Dash`中回调交互高级特性的探讨，在今后陆续推出的教程内容中，我们将一起来学习`Dash`生态中那些丰富的**「页面部件」**，从而赋予我们打造各种强大交互式web应用的能力。

而在今天的教程内容中，我将带大家学习`Dash`中实用的一些基础性的**「静态部件」**，它们可以帮助我们打造更加正式的web应用，并在**最后**教大家如何**仅仅60行代码就开发出一个在线markdown编辑器**。

![aba2d56a0c3123604b1287fc14f5d164.png][] 图1

# 2 Dash中的基础静态部件 #

我们在这里所说的静态页面部件，主要指的是其本身不具备直接的交互功能，而是以**「呈现内容」**为主要功能，就像下面的简单对比一样：

> ❝
> 
> app1.py
> 
> ❞

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.Hr(),
                html.H2('这是二级标题'),
                html.H3('这是三级标题'),
                html.H4('这是四级标题'),
                html.P(
                    [
                        '这是一个',
                        html.A('链接', href='#'),
                        '，而这是一段',
                        html.Strong('加粗文字'),
                        '，这是一段带上下标的文字：',
                        '测试',
                        html.Sup('上标'),
                        '，测试',
                        html.Sub('下标')
                    ]
                ),
    
                html.Br(),
                html.H1('交互部件示例'),
                html.Br(),
                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)

![c12cddceb26e48eb345eb49bdf939717.gif][] 图2

可以看到，静态部件其实就是我们平时浏览网页看到的各种内容元素，他们本身不直接承担回调交互功能，只能配合其他交互部件来实现交互功能。

## 2.1 Dash中常用的基础静态部件 ##

在`Dash`中所集成的一些常用基础性静态部件，其实就是对一些常见`html`元素的迁移，对应着`dash_html_components`中封装的众多类，这里我们只介绍部分比较常用的：

### 2.1.1 与文字格式相关的常用部件 ###

首先我们来介绍`Dash`众多基础静态部件中，与组织页面或文字格式相关的一些：

*  **「H1()到H6()」**

在`dash_html_components`中，`H1()`到`H6()`分别对应着1级到6级标题。

*  **「Br()与Hr()」**

`dash_html_components`中的`Br()`表示换行，而`Hr()`则表示水平分割线，这在我们布局元素时经常使用到。

*  **「P()」**

`P()`用于表示一段文字或内容，典型如我们在博客中看到的每一段落内容都是由`P()`标签所组织的，配合`css`中的`text-indent`属性可以用来设置首行缩进。

*  **「A()」**

`A()`用于表示一个可点击的链接，其参数`href`用于填入对应跳转的地址，也可以配合`id`，实现点击重新定位到页面内的其它元素，其`target`参数用于设置跳转方式，譬如`target="_blank"`会在新标签页跳转打开，具体内容可参考（https://www.w3school.com.cn/tags/att\_a\_target.asp）。

*  **「I()、Code()、U()、Mark()」**

`I()`主要用于在段落中将包裹的文字内容变为斜体，`Code()`用于在一段文字中表示`代码片段`，`U()`用于给所包含内容添加下划线，`Mark()`则用于高亮标注文字。

以上所介绍的这些静态部件可以通过下面的小例子直观的感受一下：

> ❝
> 
> app2.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            [
                html.H1('一级标题', id='demo1'),
                html.H2('二级标题'),
                html.H3('三级标题'),
                html.H4('四级标题'),
                html.H5('五级标题'),
                html.H6('六级标题'),
                html.Br(), # 换行
                html.Hr(), # 水平分割线
                html.P('这是一段文字。'*20),
                html.P('这是另一段带有首行缩进的文字。'*10, style={'text-indent': '3rem'}),
                html.A('跳转到费弗里的Github仓库',
                       target='_blank',
                       href='https://github.com/CNFeffery/DataScienceStudyNotes'), # 跳转到外部链接
                html.Br(),
                html.A('跳转到六级标题', href='#demo2'),
                html.P(
                    [
                        '一段文字中出现了',
                        html.I('斜体'),
                        '，以及代码片段',
                        html.Code('import dash'),
                        '，还有一段',
                        html.U('带下划线的文字'),
                        '，一段',
                        html.Mark('高亮标注文字'),
                        '，以及另一段',
                        html.Mark('不同颜色的高亮标注文字。', style={'background-color': 'lightblue'})
                     ]
                )
            ] + [html.Br()] * 50 + [html.A('回到顶端一级标题', href='#demo1'),
                                    html.H1('页内元素跳转示例标题', id='demo2')]
        )
    )
    
    
    if __name__ == '__main__':
        app.run_server(debug=True)

![d15eca1d6b193aebeb7fc66e64f23438.gif][] 图3

### 2.1.2 与内容组织相关的常用部件 ###

前面我们针对常用的一些与文字格式相关的静态部件进行了介绍，而在实际应用中我们不仅要展示文字内容，还需要展示图片、音频、视频等多媒体内容，下面我们来学习如何在`Dash`中构造更加丰富的内容展示形式：

*  **「基于Blockquote()实现块引用」**

利用`dash_html_components`中的`Blockquote()`，我们可以直接传入字符串，或嵌套其他元素，从而构造出块引用，就像`markdown`中的`>`所包含渲染的内容那样，参考下面的例子：

> ❝
> 
> app3.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            html.Blockquote(
                html.P('这是一段由块引用包裹的文字内容' * 10),
                style={
                    'background-color': 'rgba(211, 211, 211, 0.25)',
                    'text-indent': '3rem'
                }
            )
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![2945d3a58a17e618f8165d87e1da95c5.png][] 图4

*  **「基于Ol()与Li()渲染有序列表」**

利用`Ol()`嵌套多个`Li()`，可以自动渲染出带序号的有序列表，就像下面这个简单的例子：

> ❝
> 
> app4.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            html.Ol(
                [
                    html.Br(),
                    html.Br(),
                    html.Li('待办事项1'),
                    html.Li('待办事项2'),
                    html.Li('待办事项3'),
                    html.Li('待办事项4')
                ]
            )
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![1f116c98cdd0e21ed47e98027ca196d2.png][] 图5

*  **「基于Ul()与Li()渲染层级列表」**

而除了与`Ol()`相互配合之外，`Li()`还可以嵌套在`Ul()`中渲染带层级关系的列表：

> ❝
> 
> app5.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            html.Ul(
                [
                    html.Br(),
                    html.Br(),
                    html.Li('1'),
                    html.Li('2'),
                    html.Ul(
                        [
                            html.Li('2.1'),
                            html.Li('2.2'),
                            html.Li('2.3'),
                            html.Ul(
                                [
                                    html.Li('2.1.1'),
                                    html.Li('2.1.2'),
                                    html.Li('2.1.3'),
                                ]
                            )
                        ]
                    ),
                    html.Li('3'),
                    html.Li('4')
                ]
            )
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![6017679eb83540ea76529ccf06dab192.png][] 图6

*  **「利用Img()渲染图片」**

`Img()`等价于`html`中的`img`标签，我们通过`src`参数传入图片地址来渲染出图片，以我以前一篇博客的作品图片为例：

> ❝
> 
> app6.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            [
                html.H5('（在模仿中精进数据可视化05）疫情期间市值增长top25公司'),
                html.Img(src='https://img2020.cnblogs.com/blog/1344061/202011/1344061-20201129183046286-1089258422.png',
                         style={'width': '100%'})
            ]
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![1eb6d34298ed990809ebd6e6a98bd1b5.png][] 图7

*  **「利用Audio()与Video()播放音频与视频」**

利用`Audio()`和`Video()`，我们可以通过参数`src`传入对应音频与视频文件的url地址，从而实现在网页中嵌入音频与视频，其中参数`controls`必须设置为`True`否则不会正常渲染：

> ❝
> 
> app7.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            [
                html.H5('音频示例：'),
                html.Audio(src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
                           controls=True),
                html.H5('视频示例：'),
                html.Video(src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
                           controls=True,
                           style={'width': '100%'}),
            ]
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![2a88535c0f2ff9f71260f06038750ac7.gif][]

图8

*  **「利用Iframe()嵌入其他网页」**

类似`iframe`标签，我们也可以利用`Iframe()`来在网页中嵌入其他网页，可以通过`src`参数直接传入目标网页url，也可以通过`srcDoc`参数传入整个网页的html源码字符串：

> ❝
> 
> app8.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            [
                html.Iframe(src='https://www.baidu.com/',
                            style={'width': '100%', 'height': '800px'})
            ]
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![1e5b64782baa56b54518c5c6fa23ab21.png][] 图9

*  **「利用Textarea()构造输入框」**

有时候我们需要构造出一个能供用户输入大段文字的输入框，譬如很多的在线编辑器，而在`Dash`中我们可以使用`dash_core_components`中的`Textarea()`来实现这个功能，并且`dcc.Textarea()`同样具有`value`和`placeholder`属性，可以配合回调函数实现很多功能。

譬如下面的例子中我们编写了一个简单的脏话和谐工具，会将用户输入的所有他妈替换为“\*\*”????：

> ❝
> 
> app9.py
> 
> ❞

import dash
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    import dash_core_components as dcc
    from dash.dependencies import Input, Output
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        dbc.Container(
            [
                html.Br(),
                dcc.Textarea(style={'width': '100%', 'height': '300px'},
                             id='input',
                             value='',
                             placeholder='请输入文字内容！'),
                html.P(id='output')
            ]
        )
    )
    
    @app.callback(
        Output('output', 'children'),
        Input('input', 'value')
    )
    def mask_dirty_talk(value):
    
        return value.replace('他妈', '**')
    
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![a9ab0a9beb60255ff9a370d1cdecd0e6.gif][] 图10

## 2.2 dcc.Markdown()——Dash中特殊的静态部件 ##

在`Dash`中还存在一个比较特别的用于呈现静态内容的部件——`dcc.Markdown()`，它的`children`参数接受`markdown`代码，并自动在网页中呈现出渲染后的效果，其主要参数如下：

> ❝
> 
> **「children」**：字符型`markdown`源码
> 
> **「dangerously\_allow\_html」**：bool型，用于设置是否允许解析出`markdown`源码中的html代码并渲染，默认为False即不进行渲染
> 
> **「dedent」**：bool型，用于设置是否忽略每行文字开头的代码，默认为True
> 
> ❞

效果如下：

> ❝
> 
> app10.py
> 
> ❞

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('''
    > 本文示例代码已上传至我的`Github`仓库[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)
    
    # 1 简介
    
       这是我的系列教程**Python+Dash快速web应用开发**的第五期，在上一期的文章中，我们针对`Dash`中有关回调的一些技巧性的特性进行了介绍，使得我们可以更愉快地为`Dash`应用编写回调交互功能。
    
      而今天的文章作为**回调交互**系统性内容的最后一期，我将带大家get一些`Dash`中实际应用效果惊人的**高级回调特性**，系好安全带，我们起飞~
    
    <p align="center"><img src="https://img2020.cnblogs.com/blog/1344061/202102/1344061-20210207194037614-808613819.png" style="zoom:100%;" /></p>
    
    ''',
                             dangerously_allow_html=True,
                             dedent=False)
            ]
        )
    )
    
    if __name__ == "__main__":
        app.run_server(debug=True)

![a844427542f3f4a520f0943cf83ef486.png][] 图11

有了`Markdown()`部件的加持，我们就可以在某些情况下直接利用`markdown`快速编写网页，譬如编写在线文档说明页面~

# 3 利用Dash自制在线Markdown编辑器 #

在掌握了今天的教程所涉及知识之后，我们就可以自己动手书写一些具有实际交互功能的界面，譬如自制一个在线Markdown编辑器。

思路很简单，利用今天所学的`Textarea()`部件的`value`属性作为回调的`Input()`，再将`Markdown()`部件的`children`元素作为回调的`Output()`，再略微美化一下布局，便实现了如下的效果~

![7b37b8a0de9bc9cce96ed31f9fb93178.gif][] 图12

对应的代码如下：

> ❝
> 
> app11.py
> 
> ❞

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='请输入你的markdown源码！',
                            style={
                                'width': '100%',
                                'height': '100%'
                            }
                        ),
                        width=6,
                        style={
                            'padding-right': 0,
                            'border': '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)

--------------------

以上就是本文的全部内容，我们将在下一篇教程中继续探讨`Dash`中那些更加好用且功能更加丰富的静态部件，敬请期待~ 也欢迎大家在评论区与我进行讨论~

[aba2d56a0c3123604b1287fc14f5d164.png]: /images/20221021/910e5892ec81410c83b506ae51f57fd9.png
[c12cddceb26e48eb345eb49bdf939717.gif]: /images/20221021/876d2c5096244414af8d7096b1a07d06.png
[d15eca1d6b193aebeb7fc66e64f23438.gif]: /images/20221021/6d39a381c2f44e9e8e1d5eb643915dca.png
[2945d3a58a17e618f8165d87e1da95c5.png]: /images/20221021/1c161889c4d14eb38e7ecc0851619d71.png
[1f116c98cdd0e21ed47e98027ca196d2.png]: /images/20221021/ca2d24cb68974b9f9a70d962158390d8.png
[6017679eb83540ea76529ccf06dab192.png]: /images/20221021/937a16f03c314eb9b41fb38eb4f4101a.png
[1eb6d34298ed990809ebd6e6a98bd1b5.png]: /images/20221021/946e514ef11849f38bab314abddf563b.png
[2a88535c0f2ff9f71260f06038750ac7.gif]: /images/20221021/1cf6fbe99f5f45fba977fc07872ab1b7.png
[1e5b64782baa56b54518c5c6fa23ab21.png]: /images/20221021/aa2aff740ddb4a9a8609e832f3c4bff7.png
[a9ab0a9beb60255ff9a370d1cdecd0e6.gif]: /images/20221021/02503ffc1169463e835362b89b40d217.png
[a844427542f3f4a520f0943cf83ef486.png]: /images/20221021/c36c9f62fc9c40ab8610f37ebb761c0e.png
[7b37b8a0de9bc9cce96ed31f9fb93178.gif]: /images/20221021/d95f50160d264dfa8ae2cb13e6f30e26.png