前々から、ブログ記事にプログラムのソースコードを載せるときに
それをきれいに見せる方法があまりなくて、難儀しておりました。
で、この度、Googleが作っているといふ、
「google code prettify」というのを
導入してみました。
導入例：
#! /usr/bin/perl use strict; print 'Howdy, world!':
google-code-prettify
http://code.google.com/p/google-code-prettify/
参考記事：
google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ: あるＳＥのつぶやき
=========
もう、MT5の時代に、いまだにオレみたくMT 4.25を使っている人もいないと
思うので、あまり意味ないかもしれないが、
MTにこのgoogle-code-prettifyを導入する方法について書いておく。
まず、ソースコードの入手だけど、
上記のＧｏｏｇｌｅのリンクに飛べばソースコード（多数のjsとcssファイルからなる）
がさくっと手に入って、
それをFTPなどを使って、MTを使っているサーバーに上げる。
どこに置くかというと、mt-staticというフォルダがあるので、
そこが適当な場所かと思われる。
僕はmt-staticというフォルダの直下にgoogle-code-prettifyというフォルダを
作って、そこに置いた。
これで設置（インストール）は完了。
次に、テンプレートを書き換える。
ＭＴで複数のブログを持っていて、
そのブログ全部でこの機能を使いたい場合は、
ブログ毎に設定が必要なので注意。
書き足さなきゃ行けないのは下記の２つ。
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
↑これはHEADタグの中に。
<body onload="prettyPrint()">
↑bodyタグの開始タグの中にonload〜を入れる
まず、「ヘッダー」というテンプレートモジュールを探し出して、
ふさわしい場所に下記のように書き入れます。
<link href="<$MTStaticWebPath$>google-code-prettify/prett ify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="<$MTStaticWebPath$>go ogle-code-prettify/prettify.js"></script>
「MTStaticWebPath」というファンクションタグがmt-staticフォルダまでのURLを
取得してくれます。
それからbodyタグが記述されているあたりは、
このように記述してみました。
<body class="<MTIf name="body_class"><$MTGetVar name="b ody_class"$> </MTIf><$MTGetVar name="page_layout" default="la yout-wtt"$>"<MTIf name="body_onload"> onload="<$MTGetVar na me="body_onload"$>;prettyPrint()"<MT:else> onload="prettyPrint()" </MTIf>>
ちょっと見ずらいので、改行を入れてみます。
<body
class="
<MTIf name="body_class">
<$MTGetVar name="body_class"$>
</MTIf>
<$MTGetVar name="page_layout" default="layout-wtt"$>"
<MTIf name="body_onload">
onload="<$MTGetVar name="body_onload"$>;prettyPrint()"
<MT:else>
onload="prettyPrint()"
</MTIf>
>
もともと、テンプレート中にonloadに関する記述があるので、
そこに加筆した感じです。
MTIfでonloadオプションを入れるとなったら、
その末尾にprettyPrint()をくっつけ、
onloadオプションがなければそういう新たに作ります。
これで、設定はＯＫのはずです。
あとはブログ記事を書いて、プログラムのハイライトをしたいときに
<pre class="prettyprint">（プログラム）</pre>
という感じでタグで括ってあげればＯＫです。
