Add rules for syntax highlight

static/css/custom-classes.less

@@ -23,4 +23,33 @@
         border: 2px solid #EEE;
         padding: 5px;
     }
-}
+    // Syntax Highlight
+    table.highlighttable {
+        table-layout: fixed;
+        width: 100%;
+        td.linenos {
+            padding-right: 2px;
+            width: @el-syntax-highlight-line-no-width;
+            div.linenodiv  {
+                pre {
+                    background-color: @el-syntax-highlight-line-no-background-color;
+                    border-radius: @border-radius-base 0 0 @border-radius-base;
+                    color: @el-syntax-highlight-line-no-color;
+                    overflow: scroll;
+                    text-align: center;
+                }
+            }
+        }
+        td.code {
+            width: 100 - @el-syntax-highlight-line-no-width;
+            div.highlight {
+                // pygments.css has  a rule for div.highlight color. Give it the same border that
+                // descendent pre has.
+                border-radius: 0 @border-radius-base @border-radius-base 0;
+                pre {
+                    border-radius: 0 @border-radius-base @border-radius-base 0;
+                }
+            }
+        }
+    }
+}

static/css/custom-variables.less

@@ -10,6 +10,11 @@
 
 @el-page-header-color: #8B0000;
 
+// Solarized background color is #fdf6e2. Saturate and darken it to get
+@el-syntax-highlight-line-no-background-color: #ede7d4;
+@el-syntax-highlight-line-no-color: #657b83;
+@el-syntax-highlight-line-no-width: 5%;
+
 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-sans-serif:  'Helvetica Neue', Helvetica, Arial, Sans-Serif;
 @font-family-serif: 'PT Serif', Georgia, 'Times New Roman', Times, Serif;