Flask實作_ext_13_Flask-Markdown

# Flask實作_ext_13_Flask-Markdown ###### tags: `flask` `flask_ext` `python` `markdown` :::danger 官方文件： * [Flask-Markdown](https://pythonhosted.org/Flask-Markdown/) * [Flask-PageDown](https://github.com/miguelgrinberg/Flask-PageDown) ::: ## 說明 Markdown應用簡單的標記可以讓文章優雅的排版，已經愈來愈多的網頁都支援，也愈來愈多人開始利用Markdown書寫Blog，如`github`，或是`jupyter notebook`也內建，筆者目前所使用的`HackMD`即是用Markdown渲染排版。我們還會應用到`flask-pagedown`，這個套件的功能在於讓我們可以預覽，像`HackMD`就可以左邊編輯右邊預覽，當然你可以選擇單純的使用`flask-markdown`在文章呈現的時候再渲染即可，這並沒有限制。 ## 安裝 ```shell= pip install flask-markdown flask-pagedown ``` `flask-pagedown`似乎是由『miguelgrinberg』所開發，如下圖<sub>(Flask Web開發作者)</sub>： ![](https://i.imgur.com/F1ee8T7.png) ## 範例 ### `Flask-MarkDown` 我們建置一個新的虛擬環境來測試`flask-markdown`，快速的加入一個簡單的Html文件，如下： ```htmlmixed= {% filter markdown %} # h1_test markdown ## h2 ### h3 #### h4 ##### h5 {% endfilter %} ``` 第1行：利用`{% filter markdown %}{% endfilter %}`來渲染Markdown 接著新增Python文件來執行Flask，如下： ```python= from flask import Flask, render_template from flaskext.markdown import Markdown app = Flask(__name__) Markdown(app) @app.route('/') def index(): return render_template('markdown_test.html') if __name__ == '__main__': app.debug=True app.run() ``` 執行專案開啟網頁確認，我們正確的將Markdown語法渲染為Html，如下圖： ![](https://i.imgur.com/ydNCAsr.png) 後續我們的實作專案上可以直接以『`|markdown`』來做渲染，意思是一樣的，讓我們修正一下Python文件測試，如下： ```python= from flask import Flask, render_template from flaskext.markdown import Markdown app = Flask(__name__) Markdown(app) mk = """ # h1 ## h2 ### h3 #### h4 """ @app.route('/') def index(): return render_template('markdown_test.html', post=mk) if __name__ == '__main__': app.debug=True app.run() ``` 調整Html文件，如下： ```htmlmixed= {{ post|markdown }} ``` 第1行：`post`是後端拋過來的參數，利用`jinja2`表達式來加上`markdown`渲染執行專案，一樣有渲染成功，如下圖： ![](https://i.imgur.com/xnz22Mq.png) ### `Flask-PageDown` >Flask-PageDown provides a PageDownField class that extends Flask-WTF with a specialized text area field that renders an HTML preview of the Markdown text on the fly as you type. 上面是官方文件上的一個說明，整合`flask-wtf`提供了一個`PageDownField`(繼承自`TextAreaField`)，這讓我們可以方便的利用該欄位物件來做渲染呈現。另外一點是，`flask-pagedown`是編輯的時候預覽使用，而非是文章呈現的時候使用，因此如果是文章在網頁上渲染的部份是需要透過`flask-markdown`來處理的。 [官方案例說明](https://github.com/miguelgrinberg/Flask-PageDown#example)，調整我們稍早測試`flask-markdown`的Python文件如下： ```python= from flask import Flask, render_template, url_for,redirect from flask_wtf import FlaskForm from flask_pagedown.fields import PageDownField from flask_pagedown import PageDown from wtforms.fields import SubmitField app = Flask(__name__) # init PageDown PageDown(app) class PageDownFormExample(FlaskForm): # 加入一個form，單純的一個PageDownField跟提交欄位測試 pagedown = PageDownField('Enter your markdown') submit = SubmitField('Submit') @app.route('/', methods = ['GET', 'POST']) def index(): form = PageDownFormExample() if form.validate_on_submit(): text = form.pagedown.data return text return render_template('markdown_test.html', form = form) if __name__ == '__main__': app.debug=True app.secret_key = "Your Key" app.run() ``` 調整Html文件，如下： ```htmlmixed= <html> <head>  {{ pagedown.include_pagedown() }} </head> <body> <form method="POST" action={{ url_for('index') }}> {{ form.hidden_tag() }} {{ form.pagedown(only_preview=True) }} {{ form.pagedown(only_input=True, rows=10) }} {{ form.submit }} </form> </body> </html> ``` 執行專案測試會發現一個多行欄位，欄位是可以拖拉的，上面輸入`markdown`，下面會直接輸出預覽，如下圖： ![](https://i.imgur.com/blA4SkA.png) 跟在下在HackMD所見相同，如下圖： ![](https://i.imgur.com/mSLejZz.png) 觀察網頁原始碼也可以發現，`javascript`確實的由CDN來載入，如下圖： ![](https://i.imgur.com/yMtKedh.png) ## 總結透過兩個簡單的範例，我們可以快速的理解`Flask-MarkDown`與`Flask-PageDown`的功能，搭配使用我們也可以讓我們的網頁有著HackMD以及StackOverFlow的功能呈現，這對開發網頁來說是非常便利而且強大的工具，感謝Flask社區的無私貢獻。