From 6933084926a555ce1859d4e62292bee0806b67ea Mon Sep 17 00:00:00 2001
From: Andrew Tomaka <atomaka@gmail.com>
Date: Sun, 9 Mar 2014 06:30:30 -0400
Subject: [PATCH] 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 | 11 +++++++++--
 app/assets/stylesheets/highlight.css    |  1 -
 app/assets/stylesheets/pastes.css.scss  | 23 +++++++++++++++++++++++
 app/views/pastes/show.html.erb          |  5 ++++-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/pastes.js.coffee b/app/assets/javascripts/pastes.js.coffee
index cf33fea..64a46d8 100644
--- a/app/assets/javascripts/pastes.js.coffee
+++ b/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) ->
-      hljs.highlightBlock 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
diff --git a/app/assets/stylesheets/highlight.css b/app/assets/stylesheets/highlight.css
index 05e32a7..a84b6c6 100644
--- a/app/assets/stylesheets/highlight.css
+++ b/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;
 }
 
diff --git a/app/assets/stylesheets/pastes.css.scss b/app/assets/stylesheets/pastes.css.scss
index fdb8ee3..aef675a 100644
--- a/app/assets/stylesheets/pastes.css.scss
+++ b/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;
+    }
+  }
+}
diff --git a/app/views/pastes/show.html.erb b/app/views/pastes/show.html.erb
index c9f47c5..db7a5cb 100644
--- a/app/views/pastes/show.html.erb
+++ b/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>