ART&HACKS

Sooner or later you’re going to run into markdown that you need to render inside a Flask app. This article will tech you the best way to render markdown in a modern way. You will also learn how to enable code highlighting to make those code snippets in your markdown shine brighter that the sun.

If you read the official Flask documentation you will be lead to believe that best way to render markdown in flask is to use the Flask-Markdown extension. The problem is that the extension hasn’t been updated in half a decade.

I would therefore argue that it’s much better to use the standard python markdown implementation. Besides being regularly updated, the standard markdown implementation also supports extensions.

We’ll be using three extensions: markdown.extensions.attr_list, markdown.extensions.fenced_code and markdown.extensions.codehilite.

Our example markdown

We’ll render the following markdown:

### This is a header {:.myHeader}
And below is some sample python code

for n in range(1,5):
  print("Hello world!")

Creating the flask app

Consider the following Flask app:

from flask import Flask
from flask import render_template
import markdown

app = Flask(__name__)

@app.route("/")
def hello():
f = open('markdown.md', 'r')
markdownFile = f.read()

stringOfMarkdown = markdown.markdown(markdownFile, extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code'])
return render_template('index.html', stringOfMarkdown = stringOfMarkdown)

The render template

Here’s the render template the we use to display the rendered markdown:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js">
    </script>
    <title>Make markdown great again</title><!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"><!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script>
    hljs.initHighlightingOnLoad();
    </script> {{stringOfMarkdown|safe}} <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js">
    </script>
</body>
</html>

The rendered HTML

The render template function will produce the following HTML:

<h3 class="myHeader">This is a header</h3>
<p>And below is some sample python code</p>
<pre class="codehilite"><code class="language-python">for n in range(1,5):
print(&quot;Hello world!&quot;)</code></pre>

Making code colorful with highlight.js

Since we use the two markdown extensions markdown.extensions.codehilite and markdown.extensions.fenced_code when we render our markdown we can later color it using JavaScript via highlight.js.

The coloring works by applying styling to the <pre class="codehilite"> and <code class="language-python"> tags respectively.

Github code

The full source code for this article can be found in the Katja github repo

Robert Svensson

Tags: #python #flask #markdown #highlight.js

2017-11-25 20:36:00