キックボクシングの選手 兼 指導員とITエンジニアの２足のワラジを履いたおっさんの日常を綴ったBlog

仕事の息抜きに preタグの内容を見やすく整形するjQueryプラグインを作ってみた。


◆概要
preタグ内のコードを、行番号付きの見やすい表に整形する。
※ wiki や blog などにメモしておいたコード等を後で見たり使ったりする時に便利。

◆ファイル
　jquery.pre2table.js

◆使い方

(1) 整形したいpreタグに class属性を付ける。※名前は何でも良い。
<pre class="mycode">
　・
　・
</pre>

(2) ページの最初に以下を記述
<script type="text/javascript">
// .mycode の部分は、preタグに付けた class名。
$(function(){
    $(".mycode").pre2table();
});
</script>

実行結果はこんな感じ。

public class FizzBuzz {
	public static void main(String args[]){
		for (int i = 1; i <= 100; i++) {
			StringBuilder sb = new StringBuilder();
			if ((i % 3) == 0) sb.append("Fizz");
			if ((i % 5) == 0) sb.append("Buzz");
			if (sb.length()==0) sb.append(i);
			System.out.println(sb);
		}   
	}   
}

忙しい時に仕事は重なるもので、サイト制作の仕事が結構溜まって来ました。
デザインセンスもっと上げたいッス。。