Flask實作_ext_13_Flask-Markdown

tags: `flask` `flask_ext` `python` `markdown`

官方文件：

說明

Markdown應用簡單的標記可以讓文章優雅的排版，已經愈來愈多的網頁都支援，也愈來愈多人開始利用Markdown書寫Blog，如github，或是jupyter notebook也內建，筆者目前所使用的HackMD即是用Markdown渲染排版。

我們還會應用到flask-pagedown，這個套件的功能在於讓我們可以預覽，像HackMD就可以左邊編輯右邊預覽，當然你可以選擇單純的使用flask-markdown在文章呈現的時候再渲染即可，這並沒有限制。

安裝


pip install flask-markdown flask-pagedown

flask-pagedown似乎是由『miguelgrinberg』所開發，如下圖_{(Flask Web開發作者)}：

範例

`Flask-MarkDown`

我們建置一個新的虛擬環境來測試flask-markdown，快速的加入一個簡單的Html文件，如下：







{% filter markdown %}
# h1_test markdown
## h2
### h3
#### h4
##### h5
{% endfilter %}

第1行：利用{% filter markdown %}{% endfilter %}來渲染Markdown

接著新增Python文件來執行Flask，如下：













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文件測試，如下：




















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文件，如下：


{{ 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來處理的。

官方案例說明，調整我們稍早測試flask-markdown的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文件，如下：














<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社區的無私貢獻。

Flask實作_ext_13_Flask-Markdown

tags: flask flask_ext python markdown

說明

安裝

範例

Flask-MarkDown

Flask-PageDown

總結

Read more

Native Sparse Attention: Hardware-Aligned and Natively Trainable Sparse Attention

DeepSeekMath: Pushing the Limits of Mathematical Reasoning in Open Language Models

Book_論文翻譯

Dify + Whisper Asr Webservice

tags: `flask` `flask_ext` `python` `markdown`

`Flask-MarkDown`

`Flask-PageDown`