可以引導標籤顯示代碼？

Question

我想使用引導面板和選項卡來顯示圖像，然後在選項卡上顯示代碼。我怎樣才能做到這一點？我正在寫漢姆。什麼是使用pre和code標籤的正確方法？當我這樣做時，HTML中的代碼執行該表單，但是我想要顯示的是我如何執行該代碼的代碼。

感謝

.col-md-4 
     .panel.panel-default 
     .panel-body 
      .container 
      %ul.nav.nav-tabs 
       %li.active 
       %a{:href => "#home"} Preview 
       %li 
       %a{:href => "#menu1"} HTML 
       %li 
       %a{:href => "#menu2"} HAML 
      .tab-content 
       #home.tab-pane.fade.in.active 
       .col-md-3 
        %img{:alt => "Forms", :src => image_path('form.png'), :style => 'width: 100%; height: auto;'} 
       #menu1.tab-pane.fade 
       %h3 HTML 
       %pre 
        %code 
        %p 
         <div class="section section-form"> 
         <div class="section-head">Form</div> 
         <div class="section-body"> 
         <form> 
         <div class="form-group"> 
         <label for="exampleInputEmail1">Email address</label> 
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
         </div> 
         <div class="form-group"> 
         <label for="exampleInputEmail1">Email address</label> 
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" disabled> 
         </div> 

Answer 1

得到它

   %pre 
        %code 
        :ruby 
         html = <<-HTML 
         <div class="section section-form"> 
         <div class="section-head">Form</div> 
         <div class="section-body"> 
         <form> 
         <div class="form-group"> 
         <label for="exampleInputEmail1">Email address</label> 
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
         </div> 
         <div class="form-group"> 
         <label for="exampleInputEmail1">Email address</label> 
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" disabled> 
         </div> 
         HTML 
        = html