60行Python代碼開(kāi)發(fā)在線(xiàn)markdown編輯器

添加微信號(hào)"CNFeffery"加入技術(shù)交流群

?

本文示例代碼已上傳至我的Github倉(cāng)庫(kù)https://github.com/CNFeffery/DataScienceStudyNotes

?

這是我的系列教程「Python+Dash快速web應(yīng)用開(kāi)發(fā)」的第六期，在上一期的文章中，我們完成了對(duì)Dash中回調(diào)交互高級(jí)特性的探討，在今后陸續(xù)推出的教程內(nèi)容中，我們將一起來(lái)學(xué)習(xí)Dash生態(tài)中那些豐富的「頁(yè)面部件」，從而賦予我們打造各種強(qiáng)大交互式web應(yīng)用的能力。

而在今天的教程內(nèi)容中，我將帶大家學(xué)習(xí)Dash中實(shí)用的一些基礎(chǔ)性的「靜態(tài)部件」，它們可以幫助我們打造更加正式的web應(yīng)用，并在最后教大家如何僅僅60行代碼就開(kāi)發(fā)出一個(gè)在線(xiàn)markdown編輯器。

我們?cè)谶@里所說(shuō)的靜態(tài)頁(yè)面部件，主要指的是其本身不具備直接的交互功能，而是以「呈現(xiàn)內(nèi)容」為主要功能，就像下面的簡(jiǎn)單對(duì)比一樣：

?

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('靜態(tài)部件示例'),
????????????html.Hr(),
????????????html.H2('這是二級(jí)標(biāo)題'),
????????????html.H3('這是三級(jí)標(biāo)題'),
????????????html.H4('這是四級(jí)標(biāo)題'),
????????????html.P(
????????????????[
????????????????????'這是一個(gè)',
????????????????????html.A('鏈接',?href='#'),
????????????????????'，而這是一段',
????????????????????html.Strong('加粗文字'),
????????????????????'，這是一段帶上下標(biāo)的文字：',
????????????????????'測(cè)試',
????????????????????html.Sup('上標(biāo)'),
????????????????????'，測(cè)試',
????????????????????html.Sub('下標(biāo)')
????????????????]
????????????),

????????????html.Br(),
????????????html.H1('交互部件示例'),
????????????html.Br(),
????????????dcc.Dropdown(
????????????????options=[
????????????????????{'label':?'測(cè)試1',?'value':?'測(cè)試1'},
????????????????????{'label':?'測(cè)試2',?'value':?'測(cè)試2'},
????????????????????{'label':?'測(cè)試3',?'value':?'測(cè)試3'},
????????????????]),
????????????html.Br(),
????????????dcc.Checklist(
????????????????options=[
????????????????????{'label':?'測(cè)試1',?'value':?'測(cè)試1'},
????????????????????{'label':?'測(cè)試2',?'value':?'測(cè)試2'},
????????????????????{'label':?'測(cè)試3',?'value':?'測(cè)試3'},
????????????????],
????????????????value=['測(cè)試1']
????????????),
????????????html.Br(),
????????????dcc.RangeSlider(
????????????????min=0,
????????????????max=20,
????????????????step=0.5,
????????????????value=[5,?15]
????????????)
????????]
????)
)

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

可以看到，靜態(tài)部件其實(shí)就是我們平時(shí)瀏覽網(wǎng)頁(yè)看到的各種內(nèi)容元素，他們本身不直接承擔(dān)回調(diào)交互功能，只能配合其他交互部件來(lái)實(shí)現(xiàn)交互功能。

2.1 Dash中常用的基礎(chǔ)靜態(tài)部件

在Dash中所集成的一些常用基礎(chǔ)性靜態(tài)部件，其實(shí)就是對(duì)一些常見(jiàn)html元素的遷移，對(duì)應(yīng)著dash_html_components中封裝的眾多類(lèi)，這里我們只介紹部分比較常用的：

2.1.1 與文字格式相關(guān)的常用部件

首先我們來(lái)介紹Dash眾多基礎(chǔ)靜態(tài)部件中，與組織頁(yè)面或文字格式相關(guān)的一些：

• 「H1()到H6()」

在dash_html_components中，H1()到H6()分別對(duì)應(yīng)著1級(jí)到6級(jí)標(biāo)題。

• 「Br()與Hr()」

dash_html_components中的Br()表示換行，而Hr()則表示水平分割線(xiàn)，這在我們布局元素時(shí)經(jīng)常使用到。

• 「P()」

P()用于表示一段文字或內(nèi)容，典型如我們?cè)诓┛椭锌吹降拿恳欢温鋬?nèi)容都是由P()標(biāo)簽所組織的，配合css中的text-indent屬性可以用來(lái)設(shè)置首行縮進(jìn)。

• 「A()」

A()用于表示一個(gè)可點(diǎn)擊的鏈接，其參數(shù)href用于填入對(duì)應(yīng)跳轉(zhuǎn)的地址，也可以配合id，實(shí)現(xiàn)點(diǎn)擊重新定位到頁(yè)面內(nèi)的其它元素，其target參數(shù)用于設(shè)置跳轉(zhuǎn)方式，譬如target="_blank"會(huì)在新標(biāo)簽頁(yè)跳轉(zhuǎn)打開(kāi)，具體內(nèi)容可參考（https://www.w3school.com.cn/tags/att_a_target.asp）。

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

I()主要用于在段落中將包裹的文字內(nèi)容變?yōu)?span>斜體，Code()用于在一段文字中表示代碼片段，U()用于給所包含內(nèi)容添加下劃線(xiàn)，Mark()則用于高亮標(biāo)注文字。

以上所介紹的這些靜態(tài)部件可以通過(guò)下面的小例子直觀(guān)的感受一下：

?

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('一級(jí)標(biāo)題',?id='demo1'),
????????????html.H2('二級(jí)標(biāo)題'),
????????????html.H3('三級(jí)標(biāo)題'),
????????????html.H4('四級(jí)標(biāo)題'),
????????????html.H5('五級(jí)標(biāo)題'),
????????????html.H6('六級(jí)標(biāo)題'),
????????????html.Br(),?#?換行
????????????html.Hr(),?#?水平分割線(xiàn)
????????????html.P('這是一段文字。'*20),
????????????html.P('這是另一段帶有首行縮進(jìn)的文字。'*10,?style={'text-indent':?'3rem'}),
????????????html.A('跳轉(zhuǎn)到費(fèi)弗里的Github倉(cāng)庫(kù)',
???????????????????target='_blank',
???????????????????href='https://github.com/CNFeffery/DataScienceStudyNotes'),?#?跳轉(zhuǎn)到外部鏈接
????????????html.Br(),
????????????html.A('跳轉(zhuǎn)到六級(jí)標(biāo)題',?href='#demo2'),
????????????html.P(
????????????????[
????????????????????'一段文字中出現(xiàn)了',
????????????????????html.I('斜體'),
????????????????????'，以及代碼片段',
????????????????????html.Code('import?dash'),
????????????????????'，還有一段',
????????????????????html.U('帶下劃線(xiàn)的文字'),
????????????????????'，一段',
????????????????????html.Mark('高亮標(biāo)注文字'),
????????????????????'，以及另一段',
????????????????????html.Mark('不同顏色的高亮標(biāo)注文字。',?style={'background-color':?'lightblue'})
?????????????????]
????????????)
????????]?+?[html.Br()]?*?50?+?[html.A('回到頂端一級(jí)標(biāo)題',?href='#demo1'),
????????????????????????????????html.H1('頁(yè)內(nèi)元素跳轉(zhuǎn)示例標(biāo)題',?id='demo2')]
????)
)


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

2.1.2 與內(nèi)容組織相關(guān)的常用部件

前面我們針對(duì)常用的一些與文字格式相關(guān)的靜態(tài)部件進(jìn)行了介紹，而在實(shí)際應(yīng)用中我們不僅要展示文字內(nèi)容，還需要展示圖片、音頻、視頻等多媒體內(nèi)容，下面我們來(lái)學(xué)習(xí)如何在Dash中構(gòu)造更加豐富的內(nèi)容展示形式：

• 「基于Blockquote()實(shí)現(xiàn)塊引用」

利用dash_html_components中的Blockquote()，我們可以直接傳入字符串，或嵌套其他元素，從而構(gòu)造出塊引用，就像markdown中的>所包含渲染的內(nèi)容那樣，參考下面的例子：

?

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('這是一段由塊引用包裹的文字內(nèi)容'?*?10),
????????????style={
????????????????'background-color':?'rgba(211,?211,?211,?0.25)',
????????????????'text-indent':?'3rem'
????????????}
????????)
????)
)

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

• 「基于Ol()與Li()渲染有序列表」

利用Ol()嵌套多個(gè)Li()，可以自動(dòng)渲染出帶序號(hào)的有序列表，就像下面這個(gè)簡(jiǎn)單的例子：

?

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('待辦事項(xiàng)1'),
????????????????html.Li('待辦事項(xiàng)2'),
????????????????html.Li('待辦事項(xiàng)3'),
????????????????html.Li('待辦事項(xiàng)4')
????????????]
????????)
????)
)

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

• 「基于Ul()與Li()渲染層級(jí)列表」

而除了與Ol()相互配合之外，Li()還可以嵌套在Ul()中渲染帶層級(jí)關(guān)系的列表：

?

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)

• 「利用Img()渲染圖片」

Img()等價(jià)于html中的img標(biāo)簽，我們通過(guò)src參數(shù)傳入圖片地址來(lái)渲染出圖片，以我以前一篇博客的作品圖片為例：

?

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('（在模仿中精進(jìn)數(shù)據(jù)可視化05）疫情期間市值增長(zhǎng)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)

• 「利用Audio()與Video()播放音頻與視頻」

利用Audio()和Video()，我們可以通過(guò)參數(shù)src傳入對(duì)應(yīng)音頻與視頻文件的url地址，從而實(shí)現(xiàn)在網(wǎng)頁(yè)中嵌入音頻與視頻，其中參數(shù)controls必須設(shè)置為True否則不會(huì)正常渲染：

?

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)

• 「利用Iframe()嵌入其他網(wǎng)頁(yè)」

類(lèi)似iframe標(biāo)簽，我們也可以利用Iframe()來(lái)在網(wǎng)頁(yè)中嵌入其他網(wǎng)頁(yè)，可以通過(guò)src參數(shù)直接傳入目標(biāo)網(wǎng)頁(yè)url，也可以通過(guò)srcDoc參數(shù)傳入整個(gè)網(wǎng)頁(yè)的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)

• 「利用Textarea()構(gòu)造輸入框」

有時(shí)候我們需要構(gòu)造出一個(gè)能供用戶(hù)輸入大段文字的輸入框，譬如很多的在線(xiàn)編輯器，而在Dash中我們可以使用dash_core_components中的Textarea()來(lái)實(shí)現(xiàn)這個(gè)功能，并且dcc.Textarea()同樣具有value和placeholder屬性，可以配合回調(diào)函數(shù)實(shí)現(xiàn)很多功能。

譬如下面的例子中我們編寫(xiě)了一個(gè)簡(jiǎn)單的臟話(huà)和諧工具，會(huì)將用戶(hù)輸入的所有他媽替換為“**”??：

?

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='請(qǐng)輸入文字內(nèi)容！'),
????????????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)

2.2 dcc.Markdown()——Dash中特殊的靜態(tài)部件

在Dash中還存在一個(gè)比較特別的用于呈現(xiàn)靜態(tài)內(nèi)容的部件——dcc.Markdown()，它的children參數(shù)接受markdown代碼，并自動(dòng)在網(wǎng)頁(yè)中呈現(xiàn)出渲染后的效果，其主要參數(shù)如下：

?

「children」：字符型markdown源碼

「dangerously_allow_html」：bool型，用于設(shè)置是否允許解析出markdown源碼中的html代碼并渲染，默認(rèn)為False即不進(jìn)行渲染

「dedent」：bool型，用于設(shè)置是否忽略每行文字開(kāi)頭的代碼，默認(rèn)為T(mén)rue

?

效果如下：

?

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`倉(cāng)庫(kù)[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)

#?1?簡(jiǎn)介

???這是我的系列教程**Python+Dash快速web應(yīng)用開(kāi)發(fā)**的第五期，在上一期的文章中，我們針對(duì)`Dash`中有關(guān)回調(diào)的一些技巧性的特性進(jìn)行了介紹，使得我們可以更愉快地為`Dash`應(yīng)用編寫(xiě)回調(diào)交互功能。

??而今天的文章作為**回調(diào)交互**系統(tǒng)性?xún)?nèi)容的最后一期，我將帶大家get一些`Dash`中實(shí)際應(yīng)用效果驚人的**高級(jí)回調(diào)特性**，系好安全帶，我們起飛~

<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)

有了Markdown()部件的加持，我們就可以在某些情況下直接利用markdown快速編寫(xiě)網(wǎng)頁(yè)，譬如編寫(xiě)在線(xiàn)文檔說(shuō)明頁(yè)面~

在掌握了今天的教程所涉及知識(shí)之后，我們就可以自己動(dòng)手書(shū)寫(xiě)一些具有實(shí)際交互功能的界面，譬如自制一個(gè)在線(xiàn)Markdown編輯器。

思路很簡(jiǎn)單，利用今天所學(xué)的Textarea()部件的value屬性作為回調(diào)的Input()，再將Markdown()部件的children元素作為回調(diào)的Output()，再略微美化一下布局，便實(shí)現(xiàn)了如下的效果~

對(duì)應(yīng)的代碼如下：

?

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='請(qǐng)輸入你的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)

以上就是本文的全部?jī)?nèi)容，我們將在下一篇教程中繼續(xù)探討Dash中那些更加好用且功能更加豐富的靜態(tài)部件，敬請(qǐng)期待~?也歡迎大家在評(píng)論區(qū)與我進(jìn)行討論~

加入知識(shí)星球【我們談?wù)摂?shù)據(jù)科學(xué)】

300+小伙伴一起學(xué)習(xí)！

· 推薦閱讀?·

pythonic風(fēng)格代碼有什么好處？附12個(gè)代碼實(shí)例

Python+Dash快速web應(yīng)用開(kāi)發(fā)：回調(diào)交互篇（下）

在Python中一馬平川的書(shū)寫(xiě)代碼！