Add expand/collapse button to show and hide the hidden code lines
This commit is contained in:
parent
0620ef1f47
commit
71213f40da
|
@ -284,6 +284,19 @@ h3 {
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
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 {
|
.light .sidebar {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
color: #364149;
|
color: #364149;
|
||||||
|
@ -340,6 +353,19 @@ h3 {
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
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 {
|
.coal .sidebar {
|
||||||
background-color: #292c2f;
|
background-color: #292c2f;
|
||||||
color: #a1adb8;
|
color: #a1adb8;
|
||||||
|
@ -396,6 +422,19 @@ h3 {
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
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 {
|
.navy .sidebar {
|
||||||
background-color: #282d3f;
|
background-color: #282d3f;
|
||||||
color: #c8c9db;
|
color: #c8c9db;
|
||||||
|
@ -452,6 +491,19 @@ h3 {
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
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 {
|
.rust .sidebar {
|
||||||
background-color: #3b2e2a;
|
background-color: #3b2e2a;
|
||||||
color: #c8c9db;
|
color: #c8c9db;
|
||||||
|
|
|
@ -118,12 +118,21 @@ $( document ).ready(function() {
|
||||||
var hiding_character = "#";
|
var hiding_character = "#";
|
||||||
|
|
||||||
$("code.language-rust").each(function(i, block){
|
$("code.language-rust").each(function(i, block){
|
||||||
|
|
||||||
|
// hide lines
|
||||||
var lines = $(this).html().split("\n");
|
var lines = $(this).html().split("\n");
|
||||||
var first_non_hidden_line = false;
|
var first_non_hidden_line = false;
|
||||||
|
var lines_hidden = false;
|
||||||
|
|
||||||
for(var n = 0; n < lines.length; n++){
|
for(var n = 0; n < lines.length; n++){
|
||||||
if($.trim(lines[n])[0] == hiding_character){
|
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) {
|
else if(first_non_hidden_line) {
|
||||||
lines[n] = "\n" + lines[n];
|
lines[n] = "\n" + lines[n];
|
||||||
|
@ -133,6 +142,23 @@ $( document ).ready(function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$(this).html(lines.join(""));
|
$(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");
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,22 @@
|
||||||
border-radius: 3px;
|
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
|
color: $fg
|
||||||
background-color: $bg
|
background-color: $bg
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue