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


Subscribe to the newsletter for updates
Tkinter templates
Avatar My youtube channel

Twitter: @pythonprogrammi - python_pygame

Videos

Speech recognition game

Pygame's Platform Game

Other Pygame's posts

Published by pythonprogramming

Started with basic on the spectrum, loved javascript in the 90ies and python in the 2000, now I am back with python, still making some javascript stuff when needed.