Add expand/collapse button to show and hide the hidden code lines

src/theme/book.css

@@ -284,6 +284,19 @@ h3 {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
+.light pre {
+  position: relative;
+}
+.light pre > i {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  color: #364149;
+  cursor: pointer;
+}
+.light pre > i :hover {
+  color: #008cff;
+}
 .light .sidebar {
   background-color: #fafafa;
   color: #364149;
@@ -340,6 +353,19 @@ h3 {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
+.coal pre {
+  position: relative;
+}
+.coal pre > i {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  color: #a1adb8;
+  cursor: pointer;
+}
+.coal pre > i :hover {
+  color: #3473ad;
+}
 .coal .sidebar {
   background-color: #292c2f;
   color: #a1adb8;
@@ -396,6 +422,19 @@ h3 {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
+.navy pre {
+  position: relative;
+}
+.navy pre > i {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  color: #c8c9db;
+  cursor: pointer;
+}
+.navy pre > i :hover {
+  color: #2b79a2;
+}
 .navy .sidebar {
   background-color: #282d3f;
   color: #c8c9db;
@@ -452,6 +491,19 @@ h3 {
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
+.rust pre {
+  position: relative;
+}
+.rust pre > i {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  color: #c8c9db;
+  cursor: pointer;
+}
+.rust pre > i :hover {
+  color: #e69f67;
+}
 .rust .sidebar {
   background-color: #3b2e2a;
   color: #c8c9db;

src/theme/book.js

@@ -118,12 +118,21 @@ $( document ).ready(function() {
     var hiding_character = "#";
 
     $("code.language-rust").each(function(i, block){
+
+        // hide lines
         var lines = $(this).html().split("\n");
         var first_non_hidden_line = false;
+        var lines_hidden = false;
 
         for(var n = 0; n < lines.length; n++){
             if($.trim(lines[n])[0] == hiding_character){
-                lines[n] = "<span class=\"hidden\">" + lines[n] + "</span>";
+                if(first_non_hidden_line){
+                    lines[n] = "<span class=\"hidden\">" + "\n" + lines[n].substr(1) + "</span>";
+                }
+                else {
+                    lines[n] = "<span class=\"hidden\">" + lines[n].substr(1) + "\n"  +  "</span>";
+                }
+                lines_hidden = true;
             }
             else if(first_non_hidden_line) {
                 lines[n] = "\n" + lines[n];
@@ -133,6 +142,23 @@ $( document ).ready(function() {
             }
         }
         $(this).html(lines.join(""));
+
+        // If no lines were hidden, return
+        if(!lines_hidden) { return; }
+
+        // add expand button
+        $(this).parent().prepend("<i class=\"fa fa-expand\"></i>");
+
+        $(this).parent().find("i").click(function(e){
+            if( $(this).hasClass("fa-expand") ) {
+                $(this).removeClass("fa-expand").addClass("fa-compress");
+                $(this).parent().find("span.hidden").removeClass("hidden").addClass("unhidden");
+            }
+            else {
+                $(this).removeClass("fa-compress").addClass("fa-expand");
+                $(this).parent().find("span.unhidden").removeClass("unhidden").addClass("hidden");
+            }
+        });
     });
 
 

src/theme/stylus/themes/base.styl

@@ -7,6 +7,22 @@
         border-radius: 3px;
     }
 
+    pre {
+        position: relative;
+    }
+    pre > i {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+
+        color: $sidebar-fg;
+        cursor: pointer;
+
+        :hover {
+            color: $sidebar-active;
+        }
+    }
+
     color: $fg
     background-color: $bg