シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.in

地味に便利だったのでご紹介です。
ソースコードをブログやWebサイト
などで表示するのに、シンタックス
ハイライトはもはや必須とも言える
と思いますが、多くの場合は高機能
すぎて導入が面倒です。

ソースコードの可読性を高めるSyntax Highlightを実装するためのライブラリとマークアップ一式をサクッと生成してくれるWebサービスです。

ブログなどのように、何度も使う環境ならちゃんとしたものを入れたほうがいいでしょうけど、何かしらのライブラリを作って、そのデモページにサンプルコード貼りたい、みたいなちょっとした時なんかに結構便利かなぁと。例えばGithubページとか。(参照:GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド)

syntaxhighlight.in

選んだ言語のみの対応にしてくれるので軽量で手軽に実装出来るのが大きな魅力です。生成されるコードはjQueryで動かします。

同様のSyntax Highlight用ライブラリのは圧縮版でも67KBですが、syntaxhighlight.inなら、選択する言語は1つですので数KBほどで実装できるのが魅力でしょうか。

試しに適当に作ってみました。コードはjQuery Snippetから拝借しています。

Sample

ちょっと見にくい設定にしちゃいましたがｗデザインは設定で色々と変更できます。プレーンテキストとスイッチできるんですけど、このブログの既存のcssが邪魔して表示が崩れちゃいます。あんまり気にしないで下さい。

    $('.two_ul').each(function(i){
         var colsize = Math.round($(this).find("li").size() / 2);
        $(this).find("li").each(function(i){
             if (i>=colsize){
                 $(this).addClass('right');}
         });
        $(this).find('.right').insertAfter(this).wrapAll("<ul class='left'></ul>");
    });

    $('.two_ul').each(function(i){
        var colsize = Math.round($(this).find("li").size() / 2);
        $(this).find("li").each(function(i){
            if (i>=colsize){
                $(this).addClass('right');}
        });
        $(this).find('.right').insertAfter(this).wrapAll("<ul class='left'></ul>");
    });