Skip to content

[WordPress] A Conversion Program to Highlight the Code in HTML Block

I have used WordPress to build blog for more than half a year. The reason why I build a blog was to record the process of learning programming, so that I can recall it easily if I have forgotten many technical details in the future.

Therefore, in the process of recording the article, coloring the code is a very important thing. The most important thing is the highlighting of keywords.

I make a desktop gadget to convert from code to html, using Pygments and PyQt5 to develop, and the hope to be able to use Flask to develop into a web version in the future.

This tools does not automatically wrap lines on WordPress, but has a horizontally movable bar at the bottom of the program framework. I personally think it should be very convenient.

My code is also placed on GitHub: https://github.com/ccs96307/highlight_code_convert_html)


Desktop gadgets

Suppose I have the following code:


If I want to convert it into html code, I can use my desktop gadget.

Copy and paste the code in the CODE block, and then click the green framed Convert, the automatically generated html code will be automatically converted. Will copy it by the way!

The following DISPLAY section is to show the effect.

In WordPress, you can choose html blockto paste in:

Select “Custom HTML” in the green frame, and paste in the HTML program just now:

def main():
    words = open('input.txt').read().split('\n')
    W, H = (224, 224)
    font_size = 224
    background_color = "black"
    font_color = "white"
    font_path = "fonts/"

    for word in words:
        os.mkdir('images/{}'.format(word))
        n = 0

        for font_name in os.listdir(font_path):
            try:
                print(word, font_name)
                n += 1
                font2png(W, H, font_name, font_size, background_color, font_color, word, n)
            except:
                continue

Just like this, you can slide it.


Reference

Leave a Reply