ブログネタ
ライブドアブログのカスタマイズ に参加中!

ライブドア側で用意してくれたgoogle-code-prettifyをこの記事に設置してみました

プログラムのソースコードを色分けしてくれる簡単お手軽ライブラリーです。
jsファイルは以下のURLを直に使って良いので、わざわざ自分のブログにアップロードする必要はありません。FTPが利用できない無料版ユーザには朗報ですね。

prettify.js (キーワードハイライト用JS)
http://parts.blog.livedoor.jp/js/prettify.js
prettify.css (キーワード色付け用CSS)
http://parts.blog.livedoor.jp/css/prettify.css
livedoor Blog まとめサイト > デザインテンプレート/共通ファイル (元記事)
http://wiki.livedoor.jp/staff/d/DesignTemplate/CommonFile

設置方法

JSとCSSを利用するためheadタグ内に

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/prettify.js"></script>
<link rel="stylesheet" href="http://parts.blog.livedoor.jp/css/prettify.css" type="text/css" />

と設置して、bodyにonloadイベントを追加します。

<body onload="prettyPrint()">

最後に色分けしたいpreタグに

<pre class="prettyprint">

というクラス名を割り振れば完了です。

これだけではちょっと能がないので、HTMLテンプレートには手を入れずサイドバーに貼り付けるだけで動くものを作ってみました。

ソースコード

<script type="text/javascript">
<!--
(function() {
  // headタグエレメント
  var elHead = document.getElementsByTagName('head')[0];

  // prettify.jsをインクルード
  var elScrip = document.createElement('script');
  elScrip.type = 'text/javascript';
  elScrip.src = 'http://parts.blog.livedoor.jp/js/prettify.js';
  elHead.appendChild(elScrip);

  // prettify.cssをインクルード
  var elLink = document.createElement('link');
  elLink.rel = 'stylesheet';
  elLink.type = 'text/css';
  elLink.href = 'http://parts.blog.livedoor.jp/css/prettify.css';
  elHead.appendChild(elLink);

  // 全てのpreタグにクラス名「prettyprint」を付ける
  var elPre = document.getElementsByTagName('pre');
  for(var i = 0; i < elPre.length; i++)
    elPre[i].className = 'prettyprint';
})();
//-->
</script>

<script type="text/javascript">
<!--
prettyPrint();
//-->
</script>

全てのpreタグに勝手にprettyprintのクラス名を充ててしまうので、それを嫌う場合は該当行を削除してください。

とりあえず今回は設置方法のみで。
面白い使い方が見つかったら紹介する予定です。