IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

google-code-prettifyを試してみた

      2014/05/14

Perlのソースをブログに書くために色々と調べてみた。 参考 あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net で、今の状況で導入が比較的簡単そうな「google-code-prettify」を試してみることにした。

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

README(Javascript code prettifier)のsetupをいい加減に訳すと、

  1. ファイル一式をダウンロードします。
  2. 適用するドキュメントに、スタイルシートとJavaScriptをインクルードします。linkタグやscriptタグで指定します。
  3. bodyタグのonloadに"prettyPrint()"を書きます。
  4. スタイルシートをお好みで変更します。

という感じです。 MovableTypeに適用する場合、色々と面倒なので、テンプレートのヘッダーのスタイルシートを読み込んでいるあたりに、新しいスタイルシートを直接読み込みました。 で、スクリプトのほうは、テンプレートのフッターのbodyの閉じタグの前で読み込み、その後prettyPrint()をそのまま実行することにしました。 あとは、実際のコードを書いた部分のpreタグかcodeタグのclassを「prettyprint」に指定すれば、その部分をハイライトしてくれるようです。 とあるスクリプトを改造して使っているのですが、それをソース表示してみます。

dl.pl

respo

respo link

ZenBackWidget

 - 情報技術について ,