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
 \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
 \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
 // > 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
 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;
 }
 pre {
   font-family: Menlo, Monaco, "Courier New", monospace;
 }

+

 code {
   padding: .25em .5em;
   font-size: 85%;
 code {
   padding: .25em .5em;
   font-size: 85%;


@@ -14,19 +15,12 @@ code {
   background-color: #f9f9f9;
   border-radius: 3px;
 }
   background-color: #f9f9f9;
   border-radius: 3px;
 }

+

 pre {
 pre {

-  display: block;

   margin-top: 0;
   margin-bottom: 1rem;
   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%;
 pre code {
   padding: 0;
   font-size: 100%;


@@ -36,13 +30,31 @@ pre code {
 
 // Pygments via Jekyll
 .highlight {
 
 // Pygments via Jekyll
 .highlight {

+  padding: 1rem;

   margin-bottom: 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;
 // Gist via GitHub Pages
 // .gist .gist-file {
 //   font-family: Menlo, Monaco, "Courier New", monospace !important;