This post was originally posted on https://rudra.dev/posts/rendering-markdown-from-flask
In this post I am going to plug about a cool trick(probably useless) that I discovered geeking around the internet.
I was building a tiny microservice which would let the client side application securely authenticate with GitHub. After writing the only required API, I wanted to render the README.md file on the index page.
So I planned to convert markdown to html and serve the resultant string everytime we hit the index.
pip3 install Flask markdown
import markdown from flask import Flask import markdown.extensions.fenced_code app = Flask(__name__) @app.route("/") def index(): readme_file = open("README.md", "r") md_template_string = markdown.markdown( readme_file.read(), extensions=["fenced_code"] ) return md_template_string if __name__ == "__main__": app.run()
And it looked something like this
Well even though Richard Stallman remains my hero, fortunately I do not share his taste on web design. So without over-engineering our little snippet I thought of adding syntax highlighting with pygments and CodeHilite extension.
Let's generate css for syntax highlighting using pygments
from pygments.formatters import HtmlFormatter formatter = HtmlFormatter(style="emacs",full=True,cssclass="codehilite") css_string = formatter.get_style_defs()
ow we need to append the css_string to the markdown converted HTML string.
md_css_string = "<style>" + css_string + "</style>" md_template = md_css_string + md_template_string return md_template
Alternatively we can use pygments-css repository to get pre-generated CSS files.
Let's see how the final version looks!
Much better if you ask me!
Here is the full source code running on Glitch.
Feel free to remix and play around. Adios!