--- a/app/views/pastes/show.html.erb	Sat Jun 27 14:46:01 2015 +0900
+++ b/app/views/pastes/show.html.erb	Sun Sep 06 03:52:52 2015 +0900
@@ -1,35 +1,68 @@
 <% provide :title, "Paste ##{@paste.id}" %>
 
-<div class="paste-content">
-  <div class="paste-nav">
-    <%= link_to 'Plain', '#pl', :class => "paste-nav-item active" %>
-    <%= link_to 'Highlight', '#hl', :class => "paste-nav-item" %>
-    <%= link_to 'Markdown', '#md', :class => "paste-nav-item" %>
-  </div>
-
-  <% lines = @paste.paste.split("\n") %>
-  <%# list number contains <n> + "." + <2.5 * spaces (approx)> %>
-  <ol style="padding-left: <%= lines.size.to_s.length + 4 %>ch" class="paste-plain monospaced">
-    <% lines.each.with_index(1) do |line, i| %>
-      <li id="L<%= i %>" class="line">
-        <%= line %>
+<div class="row"><div class="col-xs-12">
+  <ul class="nav nav-tabs" role="tablist">
+    <% [
+        { :title => t(".plain"), :target => "pl", :active => true },
+        { :title => t(".highlight"), :target => "hl" },
+        { :title => t(".markdown"), :target => "md" }
+    ].each do |el| %>
+      <li role="presentation" class="<%= "active" if el[:active] %>">
+        <%= link_to el[:title], "##{el[:target]}",
+            :data => { :toggle => "tab" },
+            :aria => { :controls => el[:target] },
+            :role => "tab",
+            :class => "js-show-tab-#{el[:target]}"
+        %>
       </li>
     <% end %>
-  </ol>
+  </ul>
+</div></div>
+
+<div class="row js-showing-paste"><div class="col-xs-12"><div class="paste-show">
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="pl">
+      <pre class="paste-show__content"><code class="js-paste-pl"><%= @paste.paste %></code></pre>
+    </div>
+
+    <div role="tabpanel" class="tab-pane" id="hl">
+      <pre class="paste-show__content"><code class="js-paste-hl zp-hl"></code></pre>
+    </div>
+
+    <div role="tabpanel" class="tab-pane" id="md">
+      <div class="js-paste-md"></div>
+    </div>
+  </div>
+</div></div></div>
+
+<div class="row">
+  <%= form_for @paste, :method => :delete, :authenticity_token => false do |f| %>
+    <div class="form-group <%= error_class f.object, :key %> col-sm-4">
+      <div class="input-group">
+        <%= f.text_field :key,
+            :value => nil,
+            :placeholder => t("pastes.new.deletion_key"),
+            :autofocus => f.object.errors.any?,
+            :class => "form-control"
+        %>
+
+        <span class="input-group-btn">
+          <%= f.button t(".delete"), :class => "btn btn-danger" %>
+        </span>
+      </div>
+    </div>
+  <% end %>
 </div>
 
-<div class="settings">
-  <%= form_for @paste, :method => :delete, :authenticity_token => false, :html => { :class => "settings-item settings-item--inline" } do |f| %>
-
-    <%= f.text_field :key, :value => nil, :placeholder => 'Deletion key', :autofocus => f.object.errors.any?, :class => "main-textarea" %>
-
-    <%= f.button 'Delete this paste', :class => 'btn btn--danger btn--min-width' %>
-  <% end %>
-
-</div>
-
-<div class="paste-nav paste-nav--bottom">
-    <%= link_to 'Raw', paste_path(@paste, :txt), :class => "paste-nav-item" %>
-    <%= link_to 'Derive', root_path(:base => @paste), :class => "paste-nav-item" %>
-    <%= link_to 'More Paste', root_path, :class => "paste-nav-item" %>
-</div>
+<hr />
+<ul class="nav nav-pills">
+    <li role="presentation">
+      <%= link_to t(".raw"), paste_path(@paste, :txt) %>
+    </li>
+    <li role="presentation">
+      <%= link_to t(".derive"), root_path(:base => @paste) %>
+    </li>
+    <li role="presentation">
+      <%= link_to t(".more"), root_path %>
+    </li>
+</ul>