Markdown to html (tkinter GUI): code and live coding video

Markdown is a nice way to create web pages without having to use html, but what if you want to convert markdown to html? I searched on the web a way to do it with python and I found this code that I modified so that you can use it with tkinter, my favourite module to make graphic user interfaces with python. I posted the video with the true live coding… fast forward it to see how it goes in a quick way, because I messed around a bit, trying to understand the code I found on github (thanks to the authors, by the way).

Here is the code.

Transform markdown into html with Python and tkinter

#!/usr/bin/env python

import markdown
import os
import tkinter as tk
from tkinter import filedialog


TEMPLATE = """<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="referrer" content="no-referrer" />
    <meta name="referrer" content="unsafe-url" />
    <meta name="referrer" content="origin" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <meta name="referrer" content="origin-when-cross-origin" />

    <title>Page Title</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Helvetica,Arial,sans-serif;
        }
        code, pre {
            font-family: monospace;
        }
    </style>
</head>
<body>
<div class="container">
{{content}}
</div>
</body>
</html>
"""



def main(args=None):
    with open(args) as file:
        md = file.read()
    extensions = ['extra', 'smarty']
    html = markdown.markdown(md, extensions=extensions, output_format='html5')
    doc = TEMPLATE.replace('{{content}}', html);
    with open("file.html", "w") as file:
        file.write(doc)
    os.startfile("file.html")



def start(event):
    testo = text.get("0.0", tk.END)
    with open("file_1.md", "w") as file:
        file.write(testo)
    main("file_1.md")

root = tk.Tk()
root.withdraw()
fname = filedialog.askopenfile(initialdir=".")
root = tk.Tk()
text = tk.Text(root)
text.pack()

with open(fname.name) as file:
    file = file.read()

text.insert("0.0", file)
text.bind("<Control-b>", start)

root.mainloop()

The markdown file (it ends with .md)

# Example of Markdow to html

- this is cool
- wow, it works
- ... really?
- ...
- the end

The output of the conversion of .md in .html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="referrer" content="no-referrer" />
    <meta name="referrer" content="unsafe-url" />
    <meta name="referrer" content="origin" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <meta name="referrer" content="origin-when-cross-origin" />

    <title>Page Title</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Helvetica,Arial,sans-serif;
        }
        code, pre {
            font-family: monospace;
        }
    </style>
</head>
<body>
<div class="container">
<h1>Example of Markdow to html</h1>
<ul>
<li>this is cool</li>
<li>wow, it works</li>
<li>&hellip; really?</li>
<li>&hellip;</li>
<li>the end</li>
<li>another line&hellip;</li>
</ul>
<h2>It&rsquo;s fun to use markdow</h2>
</div>
</body>
</html>

That looks like this

Page Title

Example of Markdow to html

this is cool
wow, it works
… really?
…
the end
another line…

It’s fun to use markdow

The live coding video to make html out of markdown with Python and tkinter

Update: I made some changes in the code, eliminating the unuseful argparse use in the part of the markdown code, because I do not use the command line to make this. It also did not close the md file that was created, so I changed the code, making it better and simpler. In the video you will see the old code.

https://youtu.be/SpryYjwiqmM