redesign highlightable code and allow line numbers

diff --git a/_posts/2014-01-01-example-content.md b/_posts/2014-01-01-example-content.md
index 6c0f875ab66aa5a84b63df8cfb4f4c00f3403d5d..a090b1ee78cd6a4e56ef287c3e79427c17533273 100644 (file)
--- a/_posts/2014-01-01-example-content.md
+++ b/_posts/2014-01-01-example-content.md
@@ -49,7 +49,7 @@ Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est
 \r
 ### Code\r
 \r
-Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.\r
+Inline code is available with the `<code>` element. Snippets of multiple lines of code are supported through Pygments. Longer lines will automatically scroll horizontally when needed.\r
 \r
 {% highlight js %}\r
 // Example can be run directly in your JavaScript console\r
@@ -62,6 +62,19 @@ adder(2, 6);
 // > 8\r
 {% endhighlight %}\r
 \r
+You may also optionally show code snippets with line numbers. Add `linenos` to the Pygments tags.\r
+\r
+{% highlight js linenos %}\r
+// Example can be run directly in your JavaScript console\r
+\r
+// Create a function that takes two arguments and returns the sum of those arguments\r
+var adder = new Function("a", "b", "return a + b");\r
+\r
+// Call the function\r
+adder(2, 6);\r
+// > 8\r
+{% endhighlight %}\r
+\r
 Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.\r
 \r
 ### Gists via GitHub Pages\r

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;