2007年03月26日 16:00 [Edit]

javascript+CSS - google-code-prettifyの導入

google-code-prettifyを本blogでも導入しました。

ここでは、Livedoor Blogでの具体的な導入法を解説します。


  1. 必要なファイルの入手とインストール

    以下のファイルを入手して、アクセスできるようにしておきます。

    本blogはLivedoor Blog Proなので、ftpでファイルをアップロードで

    でアクセスできるようにしておきました。以下、この状態を前提に話を進めます。Livedoor Blogをお使いの他の方は、本blogにアップロードしたバージョンをお使いになって構いません。

  2. CSSテンプレートの変更

    以下を加えます。

    @import url(http://blog.livedoor.jp/dankogai/google/prettify.css);

    リリース元の解説どおりだと、pretty-print関連のCSSしか指定できません。さりとて<link href="prettify.css" type="text/css" rel="stylesheet" />はHTML中に一カ所しか置けません。テンプレート内に中身をコピペしてもいいのですが、この方がエレガントです。

  3. 個別記事ページテンプレートの変更

    <$ArticleBodyMore$>の直後に以下を加えます。

    <script type="text/javascript" src="http://blog.livedoor.jp/dankogai/google/prettify.js"></script>
<script>prettyPrint();</script>

    リリース元の解説にあるとおり、onload="prettyPrint()"を<body>タグに加えてもいいのですが、これだとページ内の全オブジェクトがロードされないと実行されないのでpretty-printされるのが遅いですし、他にもonloadイベントで実行されるjavascriptがある場合にこの方法はあまりお薦めできないので、ここは他のブログパーツのように簡単に上記のjavascriptタグを貼付けるだけの方がよいでしょう。

  4. ページを再構築して完了

ここで書いた例は、Livedoor Blogにおける実践例ですが、もちろん他でも応用は効くでしょう。

Enjoy!

Dan the Pretty Coder


Posted by dankogai at 16:00│Comments(0)│TrackBack(10)
このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

この記事へのトラックバック
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」:phpspot開発日誌や、404 Blog Not Found:javascript+CSS - google-code-prettifyの導入 で話題の google-code-prettify (J...
Google Javascript code prettifier を WordPress で使ってみた【土田史高のOpen Intelligence】at 2007年03月26日 23:36
404 Blog Not Foundedさんとこで見つけた。 prettifierってのは、pre要素使ったパラグラフに速攻変換して表示できるスタイルシート。 はてなでも最近できるようになったが、コードの予約語とかを色づけしてくれるやつ。 Google codeのサービスです。 いいものはいいので....
prettifierってカワイイw【XHTML読書II/*Clip&cutUp ; editorial engineer's works】at 2007年03月31日 20:15
大阪てきとー日記「google-code-prettify を導入してみた」404 Blog Not Found「javascript+CSS - google-code-prettify の導入」...
google-code-prettify【Ellinikonblue.com Weblog】at 2007年04月18日 23:39
以前から入れてみようと思っていたのに，忘れ去られていた google-code-...
google-code-prettify のテストで FizzBuzz してみた．【LIKE A WIZ】at 2007年05月09日 22:55
以前から導入していたgoogle-code-prettifyですが、どうもIE 、少なくとも6ととても相性が悪いことが判明したので、IEの場合は無効になるようにしました。
google-code-prettify vs IE 6【404 Blog Not Found】at 2007年11月22日 06:38
これでコードサンプルの実行が一段と楽になります。
javascript - DOM2TextとevalDOM【404 Blog Not Found】at 2008年06月03日 01:11
すでにいくつかのentriesで使っているのですが、かなり便利なので改めて紹介。
javascript - 特定のDOMをソース表示する【404 Blog Not Found】at 2008年07月13日 16:13
preタグ・codeタグでコードをハイライト表示する方法は様々ありますが、このサ...
google-code-prettify【技術ブログ】at 2009年11月01日 20:51
弾センセイが使ってもいいっておっしゃってるので、google-code-prettify を使わせていただきました。public class MixiDiary { private Map params_; private boolean changed_; private StringBuilder strSub_; public M...
Yor are so pretty.【curious! - reignited】at 2010年01月30日 01:20
弾センセイが使ってもいいっておっしゃってるので、google-code-prettify を使わせていただきました。public class MixiDiary { private Map params_; private boolean changed_; private StringBuilder strSub_; public M...
Yor are so pretty.【curious! - reignited】at 2010年01月30日 01:23
 
このページの上へ▲


blog seo tool : track word