google pretty printを導入してみた

| | トラックバック(0)

カテゴリ:

前々から、ブログ記事にプログラムのソースコードを載せるときに
それをきれいに見せる方法があまりなくて、難儀しておりました。

で、この度、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ライブラリ: あるSEのつぶやき

=========

もう、MT5の時代に、いまだにオレみたくMT 4.25を使っている人もいないと
思うので、あまり意味ないかもしれないが、
MTにこのgoogle-code-prettifyを導入する方法について書いておく。

まず、ソースコードの入手だけど、
上記のGoogleのリンクに飛べばソースコード(多数のjsとcssファイルからなる)
がさくっと手に入って、
それをFTPなどを使って、MTを使っているサーバーに上げる。

どこに置くかというと、mt-staticというフォルダがあるので、
そこが適当な場所かと思われる。
僕はmt-staticというフォルダの直下にgoogle-code-prettifyというフォルダを
作って、そこに置いた。
これで設置(インストール)は完了。

次に、テンプレートを書き換える。

MTで複数のブログを持っていて、
そのブログ全部でこの機能を使いたい場合は、
ブログ毎に設定が必要なので注意。

書き足さなきゃ行けないのは下記の2つ。

<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オプションがなければそういう新たに作ります。

これで、設定はOKのはずです。

あとはブログ記事を書いて、プログラムのハイライトをしたいときに

<pre class="prettyprint">(プログラム)</pre>

という感じでタグで括ってあげればOKです。

comments powered by Disqus

トラックバック(0)

このブログ記事を参照しているブログ一覧: google pretty printを導入してみた

このブログ記事に対するトラックバックURL: http://nozawashinichi.sakura.ne.jp/MT-4.25/mt-tb.cgi/886

comments powered by Disqus

このブログ記事について

このページは、Shinichi Nozawaが2011年10月 1日 23:52に書いたブログ記事です。

ひとつ前のブログ記事は「Google Chart で最低限与えるパラメータ」です。

次のブログ記事は「OpenPNEでインターフェースをいじる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。