2011-02-09

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とかかなり控えめだけど、読みやすいし。