Disable selection in HTML generated by HTMLLineTable formatter (#1276)

This commit inserts inline CSS to disable the selection of line numbers
in the HTML generated by the HTMLLineTable formatter. Due to a bug in
Safari (https://bugs.webkit.org/show_bug.cgi?id=80159) the CSS won't 
stop selection in that browser.

lib/rouge/formatters/html_line_table.rb

@@ -37,7 +37,9 @@ def stream(tokens, &b)
         token_lines(tokens) do |line_tokens|
           lineno += 1
           buffer << %(<tr id="#{sprintf @line_id, lineno}" class="#@line_class">)
-          buffer << %(<td class="#@gutter_class gl">)
+          buffer << %(<td class="#@gutter_class gl" )
+          buffer << %(style="-moz-user-select: none;-ms-user-select: none;)
+          buffer << %(-webkit-user-select: none;user-select: none;">)
           buffer << %(<pre>#{lineno}</pre></td>)
           buffer << %(<td class="#@code_class"><pre>)
           @formatter.stream(line_tokens) { |formatted| buffer << formatted }

spec/formatters/html_line_table_spec.rb

@@ -7,6 +7,9 @@
   let(:subject) { Rouge::Formatters::HTMLLineTable.new(formatter, options) }
 
   let(:output) { subject.format(input_stream) }
+  let(:cell_style) do
+    "-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"
+  end
 
   describe 'a simple token stream' do
     let(:input_stream) { [[Token['Name'], 'foo']] }
@@ -16,7 +19,7 @@
 <table class="rouge-line-table">
   <tbody>
     <tr id="line-1" class="lineno">
-      <td class="rouge-gutter gl"><pre>1</pre></td>
+      <td class="rouge-gutter gl" style="#{cell_style}"><pre>1</pre></td>
       <td class="rouge-code"><pre><span class="n">foo</span>\n</pre></td>
     </tr>
   </tbody>
@@ -33,23 +36,23 @@
     let(:input_stream) { [[Token['Text'], "foo\n"], [Token['Name'], "bar\n"], [Token['Text'], "foo\nbar"]] }
 
     it 'is formatted into a table-row for every newline' do
-        expected = <<-HTML
+      expected = <<-HTML
 <table class="rouge-line-table">
   <tbody>
     <tr id="line-1" class="lineno">
-      <td class="rouge-gutter gl"><pre>1</pre></td>
+      <td class="rouge-gutter gl" style="#{cell_style}"><pre>1</pre></td>
       <td class="rouge-code"><pre>foo\n</pre></td>
     </tr>
     <tr id="line-2" class="lineno">
-      <td class="rouge-gutter gl"><pre>2</pre></td>
+      <td class="rouge-gutter gl" style="#{cell_style}"><pre>2</pre></td>
       <td class="rouge-code"><pre><span class="n">bar</span>\n</pre></td>
     </tr>
     <tr id="line-3" class="lineno">
-      <td class="rouge-gutter gl"><pre>3</pre></td>
+      <td class="rouge-gutter gl" style="#{cell_style}"><pre>3</pre></td>
       <td class="rouge-code"><pre>foo\n</pre></td>
     </tr>
     <tr id="line-4" class="lineno">
-      <td class="rouge-gutter gl"><pre>4</pre></td>
+      <td class="rouge-gutter gl" style="#{cell_style}"><pre>4</pre></td>
       <td class="rouge-code"><pre>bar\n</pre></td>
     </tr>
   </tbody>
@@ -80,7 +83,7 @@
 <table class="code-table">
   <tbody>
     <tr id="L15" class="line-no">
-      <td class="code-gutter gl"><pre>15</pre></td>
+      <td class="code-gutter gl" style="#{cell_style}"><pre>15</pre></td>
       <td class="fenced-code">
         <pre><span class="n">foo</span>bar\n</pre>
       </td>