f99aq8ove's blog

GooglePrettify でシンタックスハイライトするようにしてみた

tag: JavaScript
03 May 2009

このエントリは 2009-05-03 に書かれました。 内容が古くなっていたり、もはや正しくないこともありますので、十分検証を行ってください。

組み込むのは簡単だった。 steps to phantasien インスパイアで、__GooglePrettify__ を埋め込んだ <pre> 対象にしてみた。こうしておくと、FeedReader で読んでる人への目印(?)になる。

これら CSS と JavaScript をロードしておいて、

<!-- __GooglePrettify__ -->
<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" />

<script type="text/JavaScript" src="http://www.google.com/jsapi"></script>
<script type="text/JavaScript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

こんなのを実行するようにしておく。

// __GooglePrettify__
(function(){
        // jQuery をロードして…
        google.load("jquery", "1");

        // コールバックは google.setOnLoadCallback で指定
        google.setOnLoadCallback(function(){
            // __GooglePrettify__ を含む <pre> の class に prettyprint を指定して、__GooglePrettify__ の行を取り除く
            $("pre:contains('__GooglePrettify__')").addClass("prettyprint").each(function(i, elm){
                    elm.innerHTML = elm.innerHTML.replace(/^.*?__GooglePrettify__.*?\n/, "");
                    $(this).css("background-color", "white");
                });

            // prettyPrint!!
            prettyPrint();
        });
    })();

Related Posts