This time I had the need to highlight some code into an html page and I could not use a plugin like we can do in WordPress. In this page, in fact, I use the plugin Crayon. In another web space (pil.glitch.me) I could not use a plugin like this, so I needed a script to make the job (I do not want to write the html code directly, it woul be a nightmare to do it manually).

Keywords

In the kw list you got the keywords that will be highlighted in orange:

kw = [ "import", "from", "while", "with", "for", "def", "return"]

Highlight functions

To highlight the functions I have looked for words that have the ( at the end with the findall function of the module re to use regex in Python.

	_def= re.findall("\w+\(", code)
	for w in _def:
		code = code.replace(w, "<b style='color:blue'>" + w[:-1] + "</b>(")
	return code

This is the whole code.

import re
import os

def highlight(code):
	"pass a string and it will be highlighted"
	
	# keywords to be colored in orange
	kw = [	"import",
			"from",
			"while",
			"with",
			"for",
			"def",
			"return"]
	for k in kw:
		code = code.replace(k, "<b style='color:orange'>" + k + "</b>")
	code = code.replace("\n","<br>")
	#print(code)

	# The 'indentation'
	code = code.replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;")

	# functions to be clored in blue
	_def= re.findall("\w+\(", code)
	for w in _def:
		code = code.replace(w, "<b style='color:blue'>" + w[:-1] + "</b>(")
	return code


html = highlight("""
def foo(arg):
	print("This is fun)
	""")

print(html)

with open("code.html", "w") as file:
	file.write(html)

os.startfile("code.html")

You add your code into this function arg when you call it in plain text like in the example below:

html = highlight("""
def foo(arg):
	print("This is fun)
	""")

This is the output:

<br><b style='color:orange'>def</b> <b style='color:blue'>foo</b>(arg):<br>&nbsp;&nbsp;&nbsp;&nbsp;<b style='color:blue'>print</b>("This is fun)<br>&nbsp;&nbsp;&nbsp;&nbsp;

Here is the ouput rendered (this is actually rendered in this page with the code above.:

def foo(arg):
print(“This is fun)

A little video explanation

A little variant

In this code we used the module keyword to get all the keywords in Python. Using keyword.kwlist we get a list of all of them. So, here’s the code, followed by a speed live coding about it:

 

import re
import os
import keyword

def highlight(code):
	
	for k in keyword.kwlist:
		k = k + " "
		code = code.replace(k,"<b style='color:darkred'>" + k + "</b>")
	code = code.replace("\n", "<br>")
	code = code.replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;")
	functions = re.findall("\w*\(", code)
	for function in functions:
		code = code.replace(function[:-1],"<b style='color:blue'>" + function[:-1] + "</b>")
	return code



html = highlight("""
def foo():
	print("Hello World")
	return 0
""")

print(html)

with open("file.html", "w") as file:
	file.write(html)

os.startfile("file.html")

 

Adding a GUI to the script

Why not making it easier for the user to get the html tags to higlight the python code into a web page? Here is the script to create a GUI with tkinter module, in which you write the python code (or paste it) into a text box and, clicking on a button, you got it converted in highlighted html in the second Text box. Another button allows you to see the output in the browser. What else could you need?

import re
import os
import keyword
import tkinter as tk


def highlight(code):
	
	for k in keyword.kwlist:
		k = k + " "
		code = code.replace(k,"<b style='color:darkred'>" + k + "</b>")
	code = code.replace("\n", "<br>")
	code = code.replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;")
	functions = re.findall("\w*\(", code)
	for function in functions:
		code = code.replace(function[:-1],"<b style='color:blue'>" + function[:-1] + "</b>")
	return code


def see_the_code(html):
	print(html)
	with open("file.html", "w") as file:
		file.write(html)
	os.startfile("file.html")

def buthigh():
	textcodehtml.insert("1.0", highlight(textcode.get("1.0", tk.END)))

def show():
	see_the_code(highlight(textcode.get("1.0", tk.END)))

root = tk.Tk()
label = tk.Label(root, text="Write the code here:")
label.pack()
textcode = tk.Text(root, height=5)
textcode.pack()
button = tk.Button(root,text="Convert into highleted html", command=buthigh)
button.pack()
textcodehtml = tk.Text(root, height=5)
textcodehtml.pack()
button = tk.Button(root,text="Show the result in the browser", command=show)
button.pack()
root.mainloop()

The Graphic User Interface is this:

Utilities

 

Advertisement