How to use slim engine for building html tags?（中文：slim模板引擎的使用demo样例）

slim-demo.slim

doctype html
html lang="ja"
  head
    meta charset="utf-8"
    title The Elevatorpitch
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    meta name="description" content="エレベーターピッッチの作成をお手伝いします。テンプレートに言葉をはめて、30 秒で話せるようになりましょう。"

    <!-- Le styles -->
    link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
    css:
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }

      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 700px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }

      .elevatorpitch {
        font-size: 20px;
      }
    link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    link rel="shortcut icon" href="/bootstrap/ico/favicon.ico"
    link rel="apple-touch-icon-precomposed" sizes="144x144" href="/bootstrap/ico/apple-touch-icon-144-precomposed.png"
    link rel="apple-touch-icon-precomposed" sizes="114x114" href="/bootstrap/ico/apple-touch-icon-114-precomposed.png"
    link rel="apple-touch-icon-precomposed" sizes="72x72" href="/bootstrap/ico/apple-touch-icon-72-precomposed.png"
    link rel="apple-touch-icon-precomposed" href="/bootstrap/ico/apple-touch-icon-57-precomposed.png"
  body
    div class="container-narrow"
      div class="masthead visible-desktop"
        h3 class="muted"
          a href="/" The Elevatorpitch 

      hr class="visible-desktop"

      div class="jumbotron"
        h1 エレベータピッチを君の手に
        p class="lead" このサイトはエレベーターピッチの作成のお手伝いをします。テンプレートを使ってエレベータピッチを作成し、30 秒で話せるように練習することができます。さあ、早速試してみましょう。
        button class="btn btn-success btn-block btn-scroll-down" エレベーターピッチを作成する

      hr class="separator form" style="margin-top:800px;"

      div class="row-fluid"
        div class="span12"
          span まずはテンプレートを埋めましょう。
      div class="row-fluid"
        div class="span12 alert alert-error" style="display:none"
          button type="button" class="close" data-dismiss="alert" x
          span 全て入力してくださいね。
      div class="row-fluid"
        div class="span12 well"
          div class="controls"
            input class="span9" type="text" placeholder="抱えている課題を解決" value=""
            span  class="help-inline" したい
          div class="controls"
            input class="span9" type="text" placeholder="対象顧客" value=""
            span  class="help-inline" 向けの
          div class="controls"
            input class="span9"  type="text" placeholder="プロダクト名" value=""
            span  class="help-inline" というプロダクトは
          div class="controls"
            input class="span9"  type="text" placeholder="プロダクトのカテゴリー" value=""
            span  class="help-inline" です。  これは、
          div class="controls"
            input  class="span9" type="text" placeholder="重要な利点、対価に見合う説得力のある理由" value=""
            span  class="help-inline" ができ
          div class="controls"
            input  class="span9" type="text" placeholder="代替手段の最右翼" value=""
            span  class="help-inline" とは違って
          div class="controls"
            input  class="span9" type="text" placeholder="差別化の決定的な特徴" value=""
            span  class="help-inline" が備わっています。
      div class="row-fluid"
        div class="span12"
          button class="btn btn-success btn-scroll-down btn-block" id="btn-submit" 決まったら次は練習ですね。

      hr class="separator" style="margin-top:800px;"

      div class="row-fluid"
        div class="span12"
          span さあ 30 秒で話せるように練習しましょう。 
      div class="row-fluid"
        div class="span12 elevatorpitch well"
          p
            strong class="pong"
            span  したい
          p
            strong class="pong"
            span  向けの
          p
            strong class="pong"
            span  というプロダクトは
          p
            strong class="pong"
            span  です。これは、
          p
            strong class="pong"
            span  ができ
          p
            strong class="pong"
            span  とは違って
          p
            strong class="pong"
            span  が備わっています。

      div class="row-fluid"
        div class="span6"
          button id="btn_count_start" class="btn btn-success btn-block toggle" スタート
          button id="btn_count_stop"  class="btn     btn-block toggle" style="display:none;" ストップ
        div class="span6"
          button class="btn btn-warning btn-block btn-scroll-up" 練り直す
      div class="row-fluid" style="margin-top:10px;"
        div class="span12"
          div class="progress"
            div id="progress_bar" class="bar bar-danger" style="width:0%;"
      div class="row-fluid"  style="text-align:center;"
        div class="span12"
          span id="remaining_sec" class="badge badge-important" style="padding:10px 20px;font-size:32px"


      hr class="separator" style="margin-top:800px;"

      - if @twitter
        div class="footer"
          p
            span created by 
            a href="https://twitter.com/#{@twitter}" @#{@twitter}

    <!-- Le javascript ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
    script src="/js/theelevatorpitch.js"