From: Mark Otto <markdotto@gmail.com>
Date: Sun, 19 Apr 2015 07:44:58 +0000 (-0700)
Subject: redesign highlightable code and allow line numbers
X-Git-Url: http://git.bitcoin.ninja/index.cgi?a=commitdiff_plain;h=312e77a7f3e46bc684e1772f7d705c607c7ae87f;p=blog

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 6c0f875..a090b1e 100644
--- 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
 
 ### Code
 
-Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.
+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.
 
 {% highlight js %}
 // Example can be run directly in your JavaScript console
@@ -62,6 +62,19 @@ adder(2, 6);
 // > 8
 {% endhighlight %}
 
+You may also optionally show code snippets with line numbers. Add `linenos` to the Pygments tags.
+
+{% highlight js linenos %}
+// Example can be run directly in your JavaScript console
+
+// Create a function that takes two arguments and returns the sum of those arguments
+var adder = new Function("a", "b", "return a + b");
+
+// Call the function
+adder(2, 6);
+// > 8
+{% endhighlight %}
+
 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.
 
 ### Gists via GitHub Pages
diff --git a/_sass/_code.scss b/_sass/_code.scss
index b4f5734..21a9e5e 100644
--- 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;