use <pre><code> blocks consistently for highlighting

mojolicious · Jan 31, 2015 · 4d21ed1 · 4d21ed1
1 parent 0d61a23
commit 4d21ed1
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/lib/Mojolicious/templates/development.html.ep b/lib/Mojolicious/templates/development.html.ep
@@ -18,7 +18,7 @@
         line-height: 1.5em;
         margin: 0;
       }
-      code {
+      :not(pre) > code {
         background-color: #eef9ff;
         border: solid #cce4ff 1px;
         border-radius: 5px;
@@ -36,6 +36,12 @@
         margin: 0;
         white-space: pre-wrap;
       }
+      pre > code {
+        display: block;
+        font: 1.0em Consolas, Menlo, Monaco, Courier, monospace;
+        margin-bottom: 0.7em;
+        margin-top: 0.7em;
+      }
       table {
         border-collapse: collapse;
         width: 100%;
@@ -145,7 +151,7 @@
           %= tag 'tr', $i ? (class => 'important') : (), begin
             <td class="key"><%= $key %></td>
             <td class="value wide">
-              <pre class="prettyprint"><%= $value %></pre>
+              <pre><code class="prettyprint"><%= $value %></code></pre>
             </td>
           % end
         % end