In this posting, I'll show you how to use markdown on Flask.
Installation
$ pip install flask flask-markdown flask-simplemde
Install Flask and Flask-Markdown, Flask-SimpleMDE.
Create an Application
2020/10/11 - [Python] - [Python] Getting Started with Flask
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run()
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using Markdown on Flask</title>
</head>
<body>
<div>
<!-- Markdown Content -->
<div>
</div>
<div style="margin: 1rem 0rem; border-bottom: 1px solid black;"></div>
<!-- Markdown Editor -->
<form action="/post" method="post">
<div>
<label for="content">Content</label>
<textarea type="text" name="content" id="content"></textarea>
</div>
<button type="submit">Post</button>
</form>
</div>
</body>
</html>
Let's start with this skeleton code.
Get Data from Form and Show it
app.py
from flask import Flask, render_template, request
# ...
@app.route("/post", methods=["POST"])
def post():
data = request.form["content"]
return render_template("index.html", data=data)
# ...You can simply get data from the form with this code.
In addition, it is returned to the HTML template.
templates/index.html
<!-- Markdown Content -->
<div>
{{ data }}
</div>
It works well.
Add Markdown Editor
app.py
# ...
from flask_simplemde import SimpleMDE
app = Flask(__name__)
app.config["SIMPLEMDE_JS_IIFE"] = True
app.config["SIMPLEMDE_USE_CDN"] = True
SimpleMDE(app)
# ...We can simply configure the Flask-SimpleMDE.
templates/index.html
<head>
{{ simplemde.css }}
{{ simplemde.js }}
</head>
<textarea></textarea>
{{ simplemde.load }}Add this code into the index.html file.
Now, we can use the Markdown editor on Flask.
But the result is still ugly.
Let's make this better.
Show Markdown Prettier
app.py
from flaskext.markdown import Markdown
# ...
Markdown(app, extensions=["nl2br", "fenced_code"])
#...Configure the Flask-Markdown.
templates/index.html
<!-- Markdown Content -->
<div>
{{ data|markdown }}
</div>Apply markdown filter to data.
Finally, it looks beautiful.
Conclusion
We can use Markdown on Flask now.
This is the full source code.
app.py
from flask import Flask, render_template, request
from flask_simplemde import SimpleMDE
from flaskext.markdown import Markdown
app = Flask(__name__)
app.config["SIMPLEMDE_JS_IIFE"] = True
app.config["SIMPLEMDE_USE_CDN"] = True
SimpleMDE(app)
Markdown(app, extensions=["nl2br", "fenced_code"])
@app.route("/")
def index():
return render_template("index.html")
@app.route("/post", methods=["POST"])
def post():
data = request.form["content"]
return render_template("index.html", data=data)
if __name__ == "__main__":
app.run()
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ simplemde.css }}
{{ simplemde.js }}
<title>Using Markdown on Flask</title>
</head>
<body>
<div>
<!-- Markdown Content -->
<div>
{{ data|markdown }}
</div>
<div style="margin: 1rem 0rem; border-bottom: 1px solid black;"></div>
<!-- Markdown Editor -->
<form action="/post" method="post">
<div>
<label for="content">Content</label>
<textarea type="text" name="content" id="content"></textarea>
{{ simplemde.load }}
</div>
<button type="submit">Post</button>
</form>
</div>
</body>
</html>'Python' 카테고리의 다른 글
| [Python] deque in collections (0) | 2021.04.30 |
|---|---|
| [Python] Underscore Usage (0) | 2021.04.26 |
| [Flask] Send Email on Flask using Flask-Mail (0) | 2021.02.28 |
| Draw Graph with MatPlotLib in Python (0) | 2021.02.25 |
| [Python] Introduce to DearPyGui (1) | 2021.02.11 |
댓글