Enable line numbers for source code listings

config.rb

@@ -113,7 +113,7 @@ activate :directory_indexes
 set :haml, { ugly: true }
 set :markdown_engine, :redcarpet
 set :markdown, fenced_code_blocks: true, smartypants: true
-activate :syntax, line_numbers: false
+activate :syntax, line_numbers: true
 
 # Methods defined in the helpers block are available in templates
 # helpers do

source/stylesheets/_syntax.css.erb

@@ -1 +1,39 @@
 <%= Rouge::Themes::Base16.mode(:light).render %>
+
+/* Overwrite some settings to be compatible with line-numbers: true */
+.highlight table tbody tr td {
+  padding: 0;
+  border: 0 none;
+  background-color: transparent;
+}
+
+.highlight {
+  overflow-x: auto;
+  margin: 1.75em 0; /* default margin of table */
+  border: #E3EDF3 1px solid; /* default border of pre */
+  border-radius: 3px;
+}
+
+.highlight table {
+  margin: 0;
+}
+
+.highlight pre {
+  border: 0 none;
+}
+
+.highlight .gl {
+  border-color: #E3EDF3;
+  border-style: solid;
+  border-width: 0 1px 0 0;
+}
+
+td.gl {
+  /* Stop line numbers being visually selected */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

source/stylesheets/application.css.scss

@@ -1,10 +1,2 @@
 @import 'vendor/casper';
 @import 'syntax';
-
-// Overwrite some styles from casper.css
-pre.highlight {
-  word-wrap: normal;
-  code {
-    white-space: pre;
-  }
-}