古いブックマークを整理していて google-code-prettify を紹介するマイコミジャーナルの記事を見つけた(→「【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを」)。
ブログの記事に埋め込むコードの色付けをしたくて調べていたときに見つけたものだったのだろう。ブックマークしただけで放置して(忘れて)しまっていたのは、外部ファイル(JavaScript と CSS)を使うその仕組みが Blogger で使うには不向きだったから。
しかし今は、GAE を外部ファイルの置き場所として使う方法を知っている(→「外部ファイルの置き場所としての Google App Engine」)。さらに Blogger Glass は、まさにこういうモノを組み込むためにあると言って良い。Blogger Glass に組み込み、さらに Blogger のテンプレートにも組み込んでみた。Blogger のテンプレートではスタイルシートと同様 Style Repository に google-code-prettify を置いた。
使い方
マイコミジャーナルの記事にも簡単な使い方が書かれている。公式なドキュメントとしては README が用意されている。
一番単純な使い方。pre 要素のクラスとして prettyprint を指定する。
class ListViewHandler(webapp.RequestHandler):
def __init__(self):
self.app = info.App()
self.view = info.ListView()
def get(self):
util.save_url(self.request, self.response)
util.fill_app_attrs(self.app, self.request.uri)
label = self.request.get("label", default_value=None)
page = int(self.request.get("page", default_value="1"))
if page > 0:
self.fill_view_attrs(label, page)
self.response.out.write(util.render_template(self.app, self.view))
else:
self.view = info.MetaInfoView()
self.fill_metainfo(label)
self.response.out.write(util.render_template(self.app, self.view))
主要な言語は自動的に認識してくれるが、クラスとして明示的に指定することもできる。クラス属性に prettyprint の後に lang-* という形式で追加する。「*」の部分の書き方は README の「How do I specify which language my code is in?」を参照のこと。Python なら py、Ruby なら rb、つまりはソースファイルの拡張子だと思って良いようだ。
class ListViewHandler(webapp.RequestHandler):
def __init__(self):
self.app = info.App()
self.view = info.ListView()
def get(self):
util.save_url(self.request, self.response)
util.fill_app_attrs(self.app, self.request.uri)
label = self.request.get("label", default_value=None)
page = int(self.request.get("page", default_value="1"))
if page > 0:
self.fill_view_attrs(label, page)
self.response.out.write(util.render_template(self.app, self.view))
else:
self.view = info.MetaInfoView()
self.fill_metainfo(label)
self.response.out.write(util.render_template(self.app, self.view))
行番号を表示させることもできる(5行ごと)。これは linenums を追加する。行番号を 1 以外から開始させるには linenums:15 のように番号を指定すれば良い。
class ListViewHandler(webapp.RequestHandler):
def __init__(self):
self.app = info.App()
self.view = info.ListView()
def get(self):
util.save_url(self.request, self.response)
util.fill_app_attrs(self.app, self.request.uri)
label = self.request.get("label", default_value=None)
page = int(self.request.get("page", default_value="1"))
if page > 0:
self.fill_view_attrs(label, page)
self.response.out.write(util.render_template(self.app, self.view))
else:
self.view = info.MetaInfoView()
self.fill_metainfo(label)
self.response.out.write(util.render_template(self.app, self.view))
既存のスタイルと組み合わせることも可能。以下の例は、このブログでこれまで使ってきた code クラスと prettyprint クラスを同時に指定したものだ。ちなみに、複数のクラスを適用する場合はクラス名を空白で区切って並べれば良い。↓の例では class="code prettyprint" と書いている。
class ListViewHandler(webapp.RequestHandler):
def __init__(self):
self.app = info.App()
self.view = info.ListView()
def get(self):
util.save_url(self.request, self.response)
util.fill_app_attrs(self.app, self.request.uri)
label = self.request.get("label", default_value=None)
page = int(self.request.get("page", default_value="1"))
if page > 0:
self.fill_view_attrs(label, page)
self.response.out.write(util.render_template(self.app, self.view))
else:
self.view = info.MetaInfoView()
self.fill_metainfo(label)
self.response.out.write(util.render_template(self.app, self.view))
スタイルの調整
prettyprint クラスのスタイルは、配布パッケージにふくまれている prettyprint.css で定義されている。ただ、主にトークンの種類による色分けの定義のみで、フォントサイズやフォントの種類については定義されていない。つまり、ブログのスタイルを引き継ぐことになる。
prettyprint.css を組み込む位置に注意すれば、ブログの CSS 中で prettyprint クラスのスタイルを追加(あるいは上書き)することができる。
実際、上の例では以下のようなスタイルをブログ側のスタイルで定義している(Blogger Glass の場合)。
pre.prettyprint {
margin: 0 2em;
padding: 5px 1em 5px 1em;
border: #cccccc 1px dotted; /* silver */
font-size: 10pt;
font-family: "Monaco", monospace;
overflow: auto;
background-color: #ffffff;
}
これは従来の pre.code のスタイル定義と背景色以外が同一のものだ。
関連リンク
- 【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (マイコミジャーナル)
- google-code-prettify (Google Code)
- README (同上; google-code-prettify の README)
- Blogger Glass (GAE アプリ)
