scss for syntax highlighting

source/stylesheets/_syntax.css.erb

@@ -1,39 +0,0 @@
-<%= 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/_syntax.css.scss.erb

@@ -0,0 +1,41 @@
+<%= Rouge::Themes::Github.render %>
+
+// Overwrite some settings to be compatible with line-numbers: true
+.highlight {
+  overflow-x: auto;
+  margin: 1.75em 0; /* default margin of table */
+  border: #E3EDF3 1px solid; /* default border of pre */
+  border-radius: 3px;
+
+  table {
+    margin: 0;
+
+    tbody tr td {
+      padding: 0;
+      border: 0 none;
+      background-color: transparent;
+    }
+  }
+
+  pre {
+    border: 0 none;
+    padding: 5px 10px;
+  }
+
+  .gl {
+    border-color: #E3EDF3;
+    border-style: solid;
+    border-width: 0 1px 0 0;
+
+    width: 1%;
+    min-width: 2em;
+
+    // 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;
+  }
+}