ソースコードのHTML表記（ハイライト）変換

ブログに投稿する際、ソースコードをハイライトするために活用しているPygmentsについて紹介したいと思います。

PygmentsはPython Syntax Highlighterと言って、様々なソースコードを言語ごとの文法で色分け表示するPython ツールです。普段はソースコードを色分けしてHTMLに変換いしてるので、その使い方をご紹介します。また、今回はせっかくなのでPythonでGUIでこの変換をしてみます。

まずはAnacondaなどのPyhthon環境で下記で必要なモジュールをインストールします。

pip install PySimpleGUI
pip install Pygments

Pygmentsはコマンドラインでの実行もサポートしていて、例えば下記のように実行することで変換が出来ます。

pygmentize -O style=vs,full=1,noclasses=1,linenos=1 -f html -l cpp -o .\test_code.html .\source_code.cpp

上記のコマンドラインで使用しているオプションについて簡単に解説します。
-O オプションを個別に指定
  style=でスタイル名を指定。詳細なスタイル名は"pygmentize -L"を実行することで確認出来ます。
  full=1 でHTMLにヘッダ含めて全て出力します。ブログに埋め込む部分のHTMLコードだけが欲しいときはこのオプションは不要です。
  noclasses=1 でスタイルシート(CSS)を用いず、直接コードに色指定などを含めます。CSSファイルでスタイル指定したいときはこのオプションは不要です。
  linenos=1 で各行頭に行番号を出力します。
-f 書式をHTMLに指定
-o 出力ファイル名

ソースコードのファイル全体を変換することが多ければコマンドラインで使ってもよいのですが、私の場合はコードの一部を変換したいケースが多いので、PySimpleGUIというPythonでGUIを提供するモジュールを使って手軽にコードの一部をHTMLに変換するツールを作成しました。以下がそのソースコードです。

import os
import PySimpleGUI as sg
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import HtmlFormatter
 
lexers = ('python','c','cpp','cmake','console','text')
styles = ('default','friendly','vim','vs')
sg.theme('DarkAmber')
layout = [
    [sg.Text('変換対象のソースコード')],
    [sg.Multiline('', size=(80, 20), key='codes')],
    [sg.Text('言語', size=(15, 1)),sg.Combo(lexers, default_value=lexers[0] ,size=(10, 1), key='lexer')],
    [sg.Text('スタイル', size=(15, 1)),sg.Combo(styles, default_value=styles[0] ,size=(10, 1), key='style')],
    [sg.Button('変換', key='convert')],
    [sg.Output(size=(80,20), key='outputs')]
]

window = sg.Window('PygmentsによるHTML変換', layout)

while True:
    event, values = window.read()

    if event == sg.WIN_CLOSED:
        break

    if event == 'convert':
        values['outputs'] = ''

        lexer = get_lexer_by_name(values['lexer'], stripall=True)
        formatter = HtmlFormatter(noclasses=True, style=values['style'])

        #print(highlight(values['codes'], lexer, formatter))
        outHtml = highlight(values['codes'], lexer, formatter)
        window['outputs'].update(outHtml)


window.close()

オプションの選択肢は私が普段よく使う項目だけなので、ご自身で適宜追加などしていただければと思います。

上記コードを実行して、更に上記ソース一部を変換した結果が下記です。上記ソースコードの表示はこのツールによる変換結果のHTMLを貼り付けたものです。