この記事は、IchigoJam Advent Calendar 2020 の 18 日目です。

きっかけ

IchigoJam の画面は白黒です。なので、LIST 命令でプログラムを出力しても当然白黒で表示されます。
まぁ、それはそういうものだと割り切ってしまえばいいのですが、プログラムをウェブページなどに載せる時くらいは、シンタックスハイライトされてたら見やすくなるかな、と思ったわけです。

シンタックスハイライトとは

言わずもがなと思いますが。

シンタックスハイライト - Wikipedia

Qiita にはソースコードをシンタックスハイライトする機能があるものの、BASIC 言語はサポートされていません。まぁ、一口に BASIC 言語と言っても実際にはかなりのバリエーションがあるわけで、なかなか汎用的には作れないという事情があるのかもしれません。

とりあえず作ってみました

前置きはこのくらいにしておいて、とりあえず、CodePen 上でデモを公開しました。
HTML で <div class="sh4ij"> ～ </div> で囲んだ範囲が以下のような感じで表示されます。

HTML なので、不等号については、< > と書く必要があります。あと、絵文字については Kidspod に倣って (#16進数) と書けば、対応する文字に置換されます。

解説

ウェブサイトに載せるということで、HTML + CSS + JS の組み合わせで実現するならば、

コードのハイライト表示 JS ライブラリ３種

このあたりを使えばサクッとできそうなのですが、IchigoJam の BASIC 言語は割と文法が緩い部分があるため(これは古い BASIC 言語全般に言えます)、もう一工夫する必要があります。
例えば、

100 IF A THEN GOTO 10

というような行儀の良いコードなら問題ないのですが、スペースとかが無くてもインタプリタがよしなに解釈してくれるため、

100 IFATHENGOTO10

と書いても動作してしまいます。このような行儀の悪い書き方をされてしまうと、上記の記事内で紹介されているライブラリではうまく対応できないのです。

公開しているデモでは、「正規表現 [A-Z][\.2A-Z]+\$? でマッチした文字列に対し、特定のキーワードと前方一致したら、一致した範囲をハイライトする」という処理を、解析対象の文字列の先頭から順繰りに適用することで、上記のような行儀の悪いコードにもそれなりに対応しています。
あとは IchigoJam ならではの改修点としては、数値リテラルの判定を以下のようにしています。

整数のみしか扱えないので、小数点 . は対象外
16進数の接頭文字は &H ではなく #
2進数の接頭文字は &B ではなく `

前述のように、絵文字の置換処理も入れているので、もはや汎用性は度外視で、IchigoJam に特化した実装となっています。

感想

正直なところ、シンタックスハイライトしたところで大して見やすくはなりませんでした。色のチョイスが悪いのかな。
IchigoJam 公式 Twitter からも、

（見やすくなったかどうかはさておき…🤫）
IchigoJamのロゴカラーっぽく、かつ、クリスマス時期に合っていてかわいいです！^^ https://t.co/SkSWjHFyaq
— こどもパソコン「IchigoJam」公式 (@IchigoJam_JP) December 9, 2020

という、微妙な評価をもらいました。

単に色分けするだけではなく、

命令にカーソルを当てたら、その命令の説明文を表示する
変数にカーソルを当てたら、プログラム内のすべての登場個所を一斉にハイライトする
GOTO や GOSUB の後のラベルや行番号にカーソルを当てたら、飛び先の行をハイライトする

という具合に、インタラクティブな反応をするようにしたら、もっと意義のあるものになるのかもしれません。