Google Code Prettify で Syntax Highlighting してみる。

世の中には色んな html 向け syntax highlighter があるけど、世界の Google さんの google-code-prettify が良さげだったので採用してみる。

Features (機能)

  • Works on HTML pages (HTML上で動くんだぜ)
  • Works even if code contains embedded links, line numbers, etc. (リンクとか行番号とかあっても動くんだぜ)
  • Simple API : include some JS&CSS and add an onload handler. (JSとCSSをincludeしてonloadするだけで動くんだぜ)
  • Lightweights : small download and does not block page from loading while running. (サイズが小さいし、動作中もサイトの閲覧を邪魔しないんだぜ)
  • Customizable styles via CSS. (CSSで見た目を変更できるんだぜ)
  • Supports all C-like, Bash-like, and XML-like languages. No need to specify the language (CとかBashとかXMLとかに似ている言語をすべてサポートするんだぜ。言語を指定する必要ないんだぜ) #<= これがお気に入りポイント
  • Extensible language handlers for other languages. You can specify the language. (他の言語向けに拡張できるんだぜ。言語指定も出来るんだぜ)
  • Widely used with good cross-browser support. Powers code.google.com (広く使われてるし、クロスブラウザ対応も良い感じなんだぜ。何しろ code.google.com で動いてるし。)

Usage (使い方)

Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty printed. (コード片を書くとき、<pre class="prettyprint">...</pre> とか <code class="prettyprint">...</code> ってしとけば、あとは自動的に Pretty Print になるんだぜ)

以下、作業ログ。

とりあえず download して、サーバにアップ。

DocumentRoot 配下に static ディレクトリを作成、その下に配置してみた。

このサイトは WordPress なんで header.php を以下のように書き換える。

...
<script src="/static/prettify.js" type="text/javascript"></script>
<link href="/static/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="prettyPrint()">
...

これで準備 OK のはず。

というか、↑これも Pretty Print になってるね!
携帯からの閲覧だと当然のようになってないけどね!
微妙に誤判定してるっぽいけどね!

というか、WordPress なんだから誰かがプラグイン作ってくださっている気がした!
もうやっちゃったから良いけどね!

以上。

にほんのひまじん について

フリーのサラリーマン
カテゴリー: 俺様のこと パーマリンク