lessでソースコードの色を消した

昨日のエントリは結構好評だったようだが、はてブで次のような気になるコメントがあった。

色覚異常があると凄く見づらいんだよなー。黒地に赤文字とかもう全然判読不可能なんだよね。OSインストール後まず最初にやるのがこの手のカラー設定OFFにすることだったりします。

正直、色覚異常のある人のことは配慮していなかった。これは反省せざるを得ない。ただしGNU Source-highlightはとても応用が効くツールなので、カスタマイズすれば色覚異常がある人にも便利なツールになるはずだ。と思ってグレースケールのカラースキームを作ってみた。

まずはご覧あれ。左が何の装飾もない場合、右がGNU Source-highlightを使ってグレースケールの装飾を施した場合だ。

少しガチャガチャした印象があるかも知れないが、文脈に従って強調表示がされて、プログラムの意味が把握しやすくなってはいないだろうか？言いたいことは、「カスタマイズすればGNU Source-highlightは色覚異常の人にも便利なツールになりますよ」ということだ。色覚異常の程度によっては、識別できる色もあると思うので、その場合には特定の色を追加するのはアリだろう。

ちなみに、このグレースケールのスタイル定義ファイルは次の通り。

keyword "38;5;255;1";
type, classname "38;5;249;1";
string "38;5;249;4;1" ;
regexp "38;5;245";
specialchar "38;5;255";
comment "38;5;237;48;5;249;1";
number "38;5;249;4;1";
preproc "38;5;249;48;5;235;4;1";
symbol "38;5;255;1";
function "38;5;255;1";
cbracket "38;5;242;1";
variable "38;5;249;4;1";

// line numbers
linenum gray;

// other elements for ChangeLog and Log files
date "38;5;237;48;5;249;1";
time "38;5;237;48;5;249;1";
ip "38;5;249;48;5;235;4;1";
file "38;5;249;4;1";
name "38;5;237;48;5;249;1";

// Internet related
url "38;5;249;4;1";

// for diffs
oldfile "38;5;237;48;5;249";
newfile "38;5;255;1";
difflines "38;5;249;48;5;235;4;1"; 

// for css
selector "38;5;249;48;5;235;4;1";
property "38;5;255;1";
value "38;5;249;4;1";

数字の羅列ばっかりだが、これがエスケープシーケンスの中身なのだ。この数字の意味について解説するのが本エントリのメインディッシュである。

keyword "38;5;255;1";

まずこの記述。ここでは、256階調による色の指定と強調表示（ボールド体）が指定されている。「38;5;255」という部分は文字色の指定で、255が色を表している。グレースケールの場合、232〜255を指定する。232が真っ黒で255が真っ白、その間の数字は徐々に明るさが変化する。つまりこの司令は「文字色を真っ白にしろ」という意味なのである。最後の「1」が強調表示の司令である。すなわち、この行は「キーワードを真っ白な太字で表示しろ」という意味なのである。

エスケープシーケンスは、その名が示す通りシーケンス、すなわち意味のある順序になっている。「38;5;255」がひとまとまりの意味で、その次にはセミコロンで区切って他のシーケンスを続けることができるというわけだ。次はもう少し長い例を見てみよう。

preproc "38;5;249;48;5;235;4;1";

「38;5;249」の部分はもう分かるだろう。文字色に249（結構明るめのグレー）が指定されている。その次に続いている「48;5;235」という部分は背景色を指定している。235が色を示す部分だが、こちらはかなり暗めのグレーである。次に「4」が続いているが、これは下線（アンダーライン）だ。そして最後の「1」は太字である。つまりこの行は「プリプロセッサ司令は文字色は明るめのグレー、背景色は暗めのグレー、そして文字には下線をつけ、さらに太字にしろ」という意味になる。

よく使うであろうエスケープシーケンスの意味を次にまとめておく。

• 効果をクリア ... 0
• 太字 ... 1
• 下線 ... 4
• 点滅 ... 5
• 反転 ... 7
• 文字色（基本） ... 3;{色番号}
• 背景色（基本） ... 4;{色番号}
• 文字色（256） ... 38;5;{色番号}
• 背景色（256） ... 48;5;{色番号}

さらにもっと詳しく知りたい人は、Wikipediaの「ANSI escape code」ページを参照するといいだろう。どんな色があるのかということについて知りたければ次のようなスクリプトを実行すれば良い。今回紹介したスタイルはグレースケールになっているが、見やすいと思う色や明るさを直接確認すれば一番確実である。

#!/usr/bin/env bash

echo "===== Basic colors ====="
COLORS=("Black" "Red" "Green" "Yellow" "Blue" "Magenta" "Cyan" "White")
PADDING=8
n=0
while [ $n -lt 8 ]
do
    len=`echo ${COLORS[$n]}|wc -c`
    spaces=$(($PADDING - $len))
    echo -n -e "$n: \e[4${n}m${COLORS[$n]}\e[0m"
    while [ $spaces -ge 0 ]
    do
        echo -n -e "\e[4${n}m \e[0m"
        spaces=$(($spaces - 1))
    done
    echo ""
    n=$(($n + 1))
done

echo ""

echo "===== 256 colors ====="
n=0
while [ $n -lt 256 ]
do
    if [ $n -lt 10 ]; then  echo -n -e "\e[48;5;${n}m  $n\e[0m"; echo -n " ";
    elif [ $n -lt 100 ]; then  echo -n -e "\e[48;5;${n}m $n\e[0m"; echo -n " ";
    else echo -n -e "\e[48;5;${n}m$n\e[0m"; echo -n " ";
    fi
    if [ $((($n + 1) % 16)) -eq 0 ]; then echo ""; fi
    n=$(($n + 1))
done

自分の身体はなかなか変えられない。しかしハイライトのスタイルは自由自在だ！ぜひ自分にあったスタイルを見つけて、快適なソースコードリーディングを楽しんでいただければと思う。

Enjoy!!

See also: lessでソースコードに色をつける