[WordPress] 在自訂 HTML 區塊將程式碼高亮 (Highlight) 的轉換程式

Last Updated on 2021-06-08 by Clay

在開始使用 WordPress 寫部落格，不知不覺也過去了半年多。打從一開始，我撰寫部落格的原因便是想要紀錄自己程式撰寫的過程，好讓未來忘記很多技術細節的自己能夠輕易回想。 (事實證明，寫部落格回來找資料真的很方便！)

那，這又跟今天的主題有什麼關聯呢？

事情是這樣的：打從我開始撰寫這個紀錄程式的部落格開始，我就一直對於『程式碼的上色』、或者你說是將程式碼 Highlight —— 感到十分苦惱。

我有借助於一些轉換網站，但轉換的格式要不是在 WordPress 上不好看、再不然就是會自動幫我換行。這在程式呈現的細節上顯得相當不美觀，別人若不是複製後在自己的編輯器上貼上，否則根本看不懂。

所以，我寫了一個桌面小工具來進行『程式碼』到『HTML 嵌入』的轉換，使用 Pygments 以及 PyQt5 開發，將來希望能夠使用 Flask 開發成網頁版本。

這個工具基本上在 WordPress 上是不會自動換行的，而是在程式框架的最底下有著可以水平移動的 Bar 條，我個人覺得應該挺方便的。

以下，就讓我詳細地解說我的程式吧！ (我的程式碼都放在 Github：https://github.com/ccs96307/highlight_code_convert_html)

桌面小工具

假設今天，我有著以下的程式碼：

如果我想要將其轉換成 HTML 程式碼，我可以使用我的桌面小工具：

將程式碼複製貼上 CODE 的區塊，然後按下綠色框起來的 "Convert"，自動生成的 HTML 程式碼就會自動轉換好了！還會順便複製起來哦XDDDD

下面 DISPLAY 的區塊就是展示效果了。

在 WordPress 當中，可以選擇 HTML 部件貼入：

選擇綠色框起來的 "自訂 HTML"，然後貼入剛剛的 HTML 程式：

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

就像這樣，可以滑動的哦～

Reference

• http://hilite.me/
• https://clay-atlas.com/blog/2020/02/10/python-chinese-tutorial-package-pygments-code-highlight/
• https://clay-atlas.com/blog/2019/08/26/python-chinese-pyqt5-tutorial-install/

以上的三個網址，分別為:

• 啟發我製作這個小工具的網站
• 我曾經寫過的 Pygments 套件說明
• 我曾經寫過的 PyQt5 界面撰寫框架