css - Bootstrap 选项卡可以显示代码吗？

Question

我想使用 Bootstrap 面板和选项卡来显示图像，然后在选项卡上显示代码。我怎样才能做到这一点？我正在用 haml 写作。使用 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