Google Code Prettifyのスタイル⁠を⁠更⁠新

リデザイン前までは黒背景のGoogle Code Prettifyのテーマを使っていたが、この背景(色)だとちょっと目立ち過ぎな気がするので控えめな色使いでスタイルを新しく書き直した。pre要素に背景を指定したくない感じなのでこの位で丁度良さそう。デフォルトと殆ど変わらないね!

Perlではこんな感じのハイライトになる。

#!/usr/bin/perl

use strict;
use warnings;

use HTML::Entities;

print encode_entities(join('', <STDIN>), '&<>"\'');

HTMLではこう。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <h1>Sample page</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
  </body>
</html>

デフォルトを一段階明るくして、コメントをグレーにした。

スタイル書いてる時にメモしたGoogle Code Prettifyが吐くHTMLのクラス名とそのハイライト対象の対照表を記録として残しておく。書くとおぼえられるし。

クラス名 ハイライト対象
.pln 基本文字色。
.str 文字列。引用符で括られた部分など。
.lit リテラル。引用符で括られないで出現する数字や定数など。
.kwd キーワード。
.com コメント。
.typ クラス名。Perlのモジュール名(の一部)などにも。
.pun 記号。演算子や式を括る括弧など。
.opn Lispの開き括弧
.clo Lispの閉じ括弧
.dec HTMLのDoctype宣言。
.tag HTMLのタグ全体。</>なども。
.atn HTMLの属性名。
.atv HTMLの属性値。

エディタとかではガッツリ色をつけてくれた方が助かることが多いけど、ざっと見るだけなウェブ上では控えめな方が良いのかもしれない。GitHubとかかなり控えめだけど、読みやすいし。