# 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>：
## 範例
### `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，如下圖：
後續我們的實作專案上可以直接以『`|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`渲染
執行專案，一樣有渲染成功，如下圖：
### `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>
<!--這部份一定要加入，相關的javascript會由CDN載入，而不需要自己加入靜態文件-->
{{ 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`，下面會直接輸出預覽，如下圖：
跟在下在HackMD所見相同，如下圖：
觀察網頁原始碼也可以發現，`javascript`確實的由CDN來載入，如下圖：
## 總結
透過兩個簡單的範例，我們可以快速的理解`Flask-MarkDown`與`Flask-PageDown`的功能，搭配使用我們也可以讓我們的網頁有著HackMD以及StackOverFlow的功能呈現，這對開發網頁來說是非常便利而且強大的工具，感謝Flask社區的無私貢獻。
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet