今回はちょっとしたシンタックスハイライトツールを作ってみたので、その内容を紹介したいと思います。
使ったのは Streamlit と Pygments というPythonライブラリ。どちらもシンプルな構成で、あっという間に動くツールができました。
シンタックスハイライト？
プログラムを書く際、モノクロで表示されると少々読みづらく感じることがあります。シンタックスハイライトは、色や装飾によって構文の要素をわかりやすく表現する技術で、以下のようなメリットがあります。
-
コードの構造を直感的に把握できる
-
エラーやタイポに早く気づける
-
読みやすく、学習やレビューがしやすくなる
実際、Visual Studio CodeやGitHub など、多くのツールやサービスでシンタックスハイライトは標準機能として使われています。
Streamlitとは？
Streamlitは、Pythonだけで簡単にWebアプリを作れるフレームワークです。データの可視化やちょっとしたツールの作成に便利で、学習コストも低く、サクッと試せるのが魅力です。Streamlit製のアプリを無料でオンライン公開できるホスティングサービス（Community Cloud）も提供されており、GitHubと連携すれば簡単にアプリを公開することもできます。共有用のURLも自動で発行されるため、社内ツールやプロトタイピング用途にも便利です。
Pygmentsとは？
Pygmentsは、ソースコードにシンタックスハイライトをつけるライブラリです。さまざまな言語やマークアップ形式に対応しており、拡張性も高いライブラリです。出力フォーマットとしてHTMLだけでなくRTFやLaTeXなども選択することができます（Available formatters）。Pythonのライブラリとして利用することもできますし、コマンドラインツール（pygmentize）も用意されています。また、オンラインのデモページも公開されています。
書籍の場合はフルカラー印刷ではないことも多く、その場合はコード部分もモノクロになりますが、フルカラー印刷の場合はコード部分をハイライト表示にしたい、という話になることがあります。弊社でもハイライトが必要になった場合はPygmentsを用いて対応しています。
作成したツール
ユーザが対象のコードを入力すると、言語とスタイルを選択でき、ハイライトされたコードがプレビューされ、さらにBBCodeで出力されるツールを社内向けに作成してみました。BBCodeは、主に掲示板やフォーラムなどのWebサービスで使われる軽量マークアップ言語です。
公式のデモページに似ていますが、BBCodeが出力となる点が異なります。デモページで出力として選択できるのはHTMLとtokensのみです。InDesignに流し込んでスタイルを適用する場面を考えると、HTMLに対して正規表現検索で対応しようとするとやや煩雑になります。一方、BBCodeは上の出力例のように比較的シンプルなマークアップになっており、流し込んだあとの処理もやりやすい印象です。社内では原稿自体の変換工程にPygmentsを組み込んで利用していますが、InDesignで組版を行う場合はBBCodeで出力してスタイルを適用しています。
このアプリはChatGPTに相談して作成してもらいましたが、HTMLの組み込みに少々ハマった程度で、スムーズに作成することができました。StreamlitのCommunity Cloudを利用すると共有も簡単にできて便利ですね。GitHubリポジトリとの連携でpushするだけでアプリが自動更新されるので、テストもとても楽にできました。
実際の案件では、Google Colabの配色に合わせたい、Visual Studio Codeの配色に合わせたい、など、場合によってはPygmentsをカスタマイズして利用することもあります。今回のアプリはカスタマイズには対応していませんが、内部的にはPygmentsのライブラリを利用しているので拡張も容易です。ハイライトの対応に困っていたらぜひご相談ください。ひとまず簡単なStreamlit×Pygmentsのアプリを作ってみた、というご紹介でした。
R&D M