Add line numbers

Line numbers are not supported by highlight.js.  This is hacked in through
JavaScript.  At page load, the number of new line characters are counted in the
code element.  Then, JavaScript loops through and adds a number and line break
to an empty div that is floated left.  This gives the appearence of line
numbers.

app/assets/javascripts/pastes.js.coffee

@@ -2,5 +2,12 @@
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
 $(document).on 'ready page:load', ->
-  $(".highlight pre code").each (i, e) ->
+  $(".code pre code").each (i, e) ->
     hljs.highlightBlock e
+    numberLines e
+
+numberLines = (e) ->
+  $('.line-numbers').html([1..lineCount(e)].join("<br/>"))
+
+lineCount = (e) ->
+  $(e).html().split("\n").length - 1

app/assets/stylesheets/highlight.css

@@ -6,7 +6,6 @@ Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiac
 
 .hljs {
   display: block;
-  padding: 0.5em;
   background: #f0f0f0;
 }
 

app/assets/stylesheets/pastes.css.scss

@@ -1,3 +1,26 @@
 // Place all the styles related to the pastes controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+.paste {
+  .line-numbers {
+    float: left;
+    padding: 10px;
+    margin: 1px 10px 0 0;
+    border-right: 1px solid;
+
+    line-height: 1.5;
+
+    font-size: 12px;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+
+    text-align: right;
+  }
+  pre {
+    margin: 0;
+    padding: 10px;
+    .code {
+      margin: 0;
+      font-size: 12px;
+    }
+  }
+}

app/views/pastes/show.html.erb

@@ -1 +1,4 @@
-<div class="highlight"><pre><code><%= @paste.content %></code></pre></div>
+<div class="paste">
+  <div class="line-numbers"></div>
+  <div class="code"><pre><code><%= @paste.content %></code></pre></div>
+</div>