redesign highlightable code and allow line numbers

[blog] / _sass / _code.scss

diff --git a/_sass/_code.scss b/_sass/_code.scss
index b4f57345f809295c8f53b72f40b636799e4fa6e8..21a9e5ea36d03aa67f86f6f090523127d4d930af 100644 (file)
--- a/_sass/_code.scss
+++ b/_sass/_code.scss
@@ -7,6 +7,7 @@ code,
 pre {
   font-family: Menlo, Monaco, "Courier New", monospace;
 }
+
 code {
   padding: .25em .5em;
   font-size: 85%;
@@ -14,19 +15,12 @@ code {
   background-color: #f9f9f9;
   border-radius: 3px;
 }
+
 pre {
-  display: block;
   margin-top: 0;
   margin-bottom: 1rem;
-  padding: 1rem;
-  font-size: .8rem;
-  line-height: 1.4;
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-  // word-wrap: break-word;
-  background-color: #f9f9f9;
 }
+
 pre code {
   padding: 0;
   font-size: 100%;
@@ -36,13 +30,31 @@ pre code {
 
 // Pygments via Jekyll
 .highlight {
+  padding: 1rem;
   margin-bottom: 1rem;
-  border-radius: 4px;
-}
-.highlight pre {
-  margin-bottom: 0;
+  font-size: .8rem;
+  line-height: 1.4;
+  background-color: #f9f9f9;
+  border-radius: .25rem;
+
+  pre {
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  .lineno {
+    display: inline-block; // Ensures the null space also isn't selectable
+    padding-right: .75rem;
+    padding-left: .25rem;
+    color: #999;
+    // Make sure numbers aren't selectable
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
 }
 
+
 // Gist via GitHub Pages
 // .gist .gist-file {
 //   font-family: Menlo, Monaco, "Courier New", monospace !important;