index.haml

#form.section
  %h2 ここにインデントを綺麗に揃えたいHTMLをコピペ
  %form{:name => 'pan', :id => 'pan', :action => '/', :method => 'post'}
    %textarea{:name => 'source', :rows => 4, :cols => 40, :title => '<p>ここにHTMLをコピペ</p>'}
    .submit
      %a{:href => 'javascript:return void(0)', :onclick => "$('#pan').submit()"} COOK!
#about.section
  %h2 hum cutletの使い方
  .main
    %ol
      %li
        %a{:href => '#form'}> ここにHTMLをコピペします。
      %li コピペしたら「COOK!」をクリック。
      %li インデントが綺麗になったHTMLをゲット！
#made_with.section
  %h2 Ham CutletはHamlを使っています
  %ul
    %li
      %a{:href => 'http://haml-lang.com/'}
        %img{:alt => 'Haml', :src => '/images/haml_banner.gif'}/
    %li
      %a{:href => 'http://haml.ursm.jp/'}
        %img{:alt => 'Haml', :src => '/images/nichi_haml_banner.gif'}/
#request.section
  %h2 バグ報告・機能追加のご依頼
  .main
    %p
      %a{:href => 'http://help-me-hackers.com/'}
        %img{:alt => 'Help me, hackers!', :src => '/images/hmhs.jpg'}/
    %ol
      %li
        %a{:href => 'http://help-me-hackers.com/'}>Help me, hackers!
        にバグ、要望を登録してください
      %li 登録する際にオプションを開き、プロジェクトに「<a href="http://help-me-hackers.com/projects/3">Hamcutlet</a>」を選択
      %li
        %a{:href => 'http://github.com/komagata/hamcutlet'}>github
        にもソースが置いてあるので、自分用にハムカツをカスタマイズすることも可能です。

:javascript
    $(document).ready(function(){
        $.updnWatermark.attachAll();
        $('.updnWatermark > label').click(function(){
            $(this).toggle();
            $("textarea").select();
        }).blur(function(){
            $(this).toggle();
        });
    });