how to render markdown in flask

How to Render Markdown in Flask

In this tutorial we will be learning how to render markdown in flask.  There are several ways you can use to render markdown from the back-end(python side) to the front-end (html) side of your flask app.

These packages include

  • Flask-Markdown
  • Flask-Misaka
  • Markdown

Let us start with Flask-Markdown.

 

Using Flask Markdown

Installation

pip install Flask-Markdown

First of all we will have to wrap our Markdown around our app to initialize the app to be able to utilize the features of markdown as below.

from flask import Flask,url_for,render_template,request
from flaskext.markdown import Markdown

# Init App
app = Flask(__name__)
Markdown(app)

@app.route('/')
def index():
	mkd_text = "## Your Markdown Here "
	return render_template('index.html',mkd_text=mkd_text)

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

On the front-end you will use filters with your jinja template to render your markdown.

 

{{ mkd_text|markdown }}

or by using the broader text

{% filter markdown %}
{{ mkd_text }}
{% endfilter %}

This is one of the ways of rendering markdown in flask.

Using Flask-Misaka

pip install Flask-Misaka

The next method follows the same approach with the use of the jinja for the html template. The only difference is to initialize it with flask-misaka as below.

from flask import Flask
from flask_misaka import Misaka

app = Flask(__name__)
Misaka(app)

@app.route('/')
def index():
	mkd_text = "## Your Markdown Here "
	return render_template('index.html',mkd_text=mkd_text)

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

On the front-end you will use filters with your jinja template to render your markdown.

 

{{ mkd_text|markdown }}

These are the ways we can render markdown in flask.

Thanks For Your Time

By Jesse E.Agbe(JCharis)

Jesus Saves

 

2 thoughts on “How to Render Markdown in Flask”

  1. Thank you so much!!! This is so simple and easy to implement! I had been expecting a lot more code to be able to do something like this. I love it!

Leave a Comment

Your email address will not be published. Required fields are marked *