diff --git a/src/theme/book.css b/src/theme/book.css index 7a9ff0ca..26e9879a 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -299,16 +299,22 @@ h5 { .light pre { position: relative; } -.light pre > i { +.light pre > .buttons { position: absolute; right: 5px; top: 5px; color: #364149; cursor: pointer; } -.light pre > i :hover { +.light pre > .buttons :hover { color: #008cff; } +.light pre > .buttons i { + margin-left: 8px; +} +.light pre > .result { + margin-top: 10px; +} .light .sidebar { background-color: #fafafa; color: #364149; @@ -372,16 +378,22 @@ h5 { .coal pre { position: relative; } -.coal pre > i { +.coal pre > .buttons { position: absolute; right: 5px; top: 5px; color: #a1adb8; cursor: pointer; } -.coal pre > i :hover { +.coal pre > .buttons :hover { color: #3473ad; } +.coal pre > .buttons i { + margin-left: 8px; +} +.coal pre > .result { + margin-top: 10px; +} .coal .sidebar { background-color: #292c2f; color: #a1adb8; @@ -445,16 +457,22 @@ h5 { .navy pre { position: relative; } -.navy pre > i { +.navy pre > .buttons { position: absolute; right: 5px; top: 5px; color: #c8c9db; cursor: pointer; } -.navy pre > i :hover { +.navy pre > .buttons :hover { color: #2b79a2; } +.navy pre > .buttons i { + margin-left: 8px; +} +.navy pre > .result { + margin-top: 10px; +} .navy .sidebar { background-color: #282d3f; color: #c8c9db; @@ -518,16 +536,22 @@ h5 { .rust pre { position: relative; } -.rust pre > i { +.rust pre > .buttons { position: absolute; right: 5px; top: 5px; color: #c8c9db; cursor: pointer; } -.rust pre > i :hover { +.rust pre > .buttons :hover { color: #e69f67; } +.rust pre > .buttons i { + margin-left: 8px; +} +.rust pre > .result { + margin-top: 10px; +} .rust .sidebar { background-color: #3b2e2a; color: #c8c9db; diff --git a/src/theme/book.js b/src/theme/book.js index 9724d044..ff539546 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -140,18 +140,20 @@ $( document ).ready(function() { $("code.language-rust").each(function(i, block){ + var code_block = $(this); + var pre_block = $(this).parent(); // hide lines - var lines = $(this).html().split("\n"); + var lines = code_block.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){ if(first_non_hidden_line){ - lines[n] = "" + "\n" + lines[n].substr(1) + ""; + lines[n] = "" + "\n" + lines[n].replace(/(\s*)#/, "$1") + ""; } else { - lines[n] = "" + lines[n].substr(1) + "\n" + ""; + lines[n] = "" + lines[n].replace(/(\s*)#/, "$1") + "\n" + ""; } lines_hidden = true; } @@ -162,25 +164,65 @@ $( document ).ready(function() { first_non_hidden_line = true; } } - $(this).html(lines.join("")); + code_block.html(lines.join("")); // If no lines were hidden, return if(!lines_hidden) { return; } // add expand button - $(this).parent().prepend(""); + pre_block.prepend("
"); - $(this).parent().find("i").click(function(e){ + pre_block.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"); + pre_block.find("span.hidden").removeClass("hidden").addClass("unhidden"); } else { $(this).removeClass("fa-compress").addClass("fa-expand"); - $(this).parent().find("span.unhidden").removeClass("unhidden").addClass("hidden"); + pre_block.find("span.unhidden").removeClass("unhidden").addClass("hidden"); } }); }); + // Process playpen code blocks + $(".playpen").each(function(block){ + var pre_block = $(this); + // Add play button + var buttons = pre_block.find(".buttons"); + if( buttons.length === 0 ) { + pre_block.prepend("
"); + buttons = pre_block.find(".buttons"); + } + buttons.prepend(""); + + buttons.find(".play-button").click(function(e){ + run_rust_code(pre_block); + }); + }); + + }); + + +function run_rust_code(code_block) { + var result_block = code_block.find(".result"); + if(result_block.length === 0) { + code_block.append(""); + result_block = code_block.find(".result"); + } + + result_block.text("Running..."); + + $.ajax({ + url: "https://play.rust-lang.org/evaluate.json", + method: "POST", + crossDomain: true, + dataType: "json", + contentType: "application/json", + data: JSON.stringify({version: "stable", optimize: "0", code: code_block.find(".language-rust").text() }), + success: function(response){ + result_block.text(response.result); + } + }); +} diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl index 9befa8d7..fe037020 100644 --- a/src/theme/stylus/themes/base.styl +++ b/src/theme/stylus/themes/base.styl @@ -10,7 +10,7 @@ pre { position: relative; } - pre > i { + pre > .buttons { position: absolute; right: 5px; top: 5px; @@ -21,6 +21,14 @@ :hover { color: $sidebar-active; } + + i { + margin-left: 8px; + } + } + + pre > .result { + margin-top: 10px; } color: $fg