Add juxtaposing support to visual test app (#1168)

This commit adds the ability to juxtapose the highlighted and raw source
in the visual test app. This can make comparison easier. To enable
juxtaposing, use the `?juxtaposed=true` query variable.

spec/visual/app.rb

@@ -89,7 +89,8 @@ def as_boolean(value)
     @raw = Rouge.highlight(@sample, 'plaintext', @formatter)
     @highlighted = Rouge.highlight(@sample, @lexer, @formatter)
 
-    erb :lexer
+    template = params[:juxtaposed] ? :lexer_juxtaposed : :lexer
+    erb template
   end
 
 

spec/visual/templates/layout.erb

@@ -16,14 +16,13 @@
       white-space: pre-wrap;
     }
     a { text-decoration: none }
-
+    header {
+      color: <%= @comment_color %>;
+      border-bottom: 1px dotted
+    }
     #page-header, #page-footer {
       padding: 15px;
       text-align: center;
-      color: <%= @comment_color %>
-    }
-    #page-header {
-      border-bottom: 1px dotted
     }
     #page-header h1 {
       margin: 0.25em;
@@ -32,10 +31,9 @@
     .section-header {
       margin-bottom: 20px;
       padding-bottom: 8px;
-      color: <%= @comment_color %>;
-      border-bottom: 1px dotted
     }
     #page-footer {
+      color: <%= @comment_color %>;
       border-top: 1px dotted
     }
     .rouge-line-table { border-collapse: collapse }

spec/visual/templates/lexer.erb

@@ -7,22 +7,23 @@
   }
 
   .legend {
+    float: right;
     padding: 15px;
     padding-left: 0;
-    float: right;
     width: 250px;
   }
 </style>
 
 <header id="page-header">
   <h1><%= @lexer.class.tag %> lexer visual test</h1>
 </header>
+
 <main>
   <header class="section-header"><h2>Highlighted</h2></header>
   <%= @highlighted %>
 
   <header class="section-header"><h2>Raw</h2></header>
-  <pre><%= @raw %></pre>
+  <%= @raw %>
 </main>
 
 <aside class="legend">

spec/visual/templates/lexer_juxtaposed.erb

@@ -0,0 +1,45 @@
+<style type="text/css">
+  main {
+    display: inline-block;
+    margin-right: -215px;
+    padding: 8px 215px 0 0;
+    width: 100%;
+  }
+  .codeviewer {
+    float: left;
+    padding: 8px 12px;
+    width: 49.5%;
+  }
+  .legend {
+    float: right;
+    padding: 16px 14px 8px 0;
+    width: 215px;
+  }
+  .legend .codehilite { font-size: 13px }
+</style>
+
+<header id="page-header">
+  <h1><%= @lexer.class.tag %> lexer visual test</h1>
+</header>
+
+<main>
+  <section>
+    <div class="codeviewer">
+      <header class="section-header"><h2>Raw</h2></header>
+      <%= @raw %>
+    </div>
+    <div class="codeviewer">
+      <header class="section-header"><h2>Highlighted</h2></header>
+      <%= @highlighted %>
+    </div>
+  </section>
+</main>
+
+<aside class="legend">
+  <header class="section-header"><h2>Legend</h2></header>
+  <pre class="codehilite">
+<% Rouge::Token.each_token do |token|
+  %><span class="<%= token.shortname %>"><%= token.qualname %></span>
+<% end %>
+  </pre>
+</aside>