Changed tab inside code blocks to reference shift + space, added instructional text to button ul

Author: katlich112358

src/assets/js/render.js

@@ -18,8 +18,8 @@ var renderCode = function(exampleName) {
 
   function enableTab(el) {
     el.onkeydown = function(e) {
-      if (e.keyCode === 9) {
-        // tab was pressed
+      if (e.keyCode === 32 && e.shiftKey) {
+        // shift + space pressed
         // get caret position/selection
         var val = this.value,
           start = this.selectionStart,
@@ -85,10 +85,13 @@ var renderCode = function(exampleName) {
       edit_space.appendChild(edit_area);
       enableTab(edit_area);
 
-      //add buttons
+      //add buttons and tab instructions
       let button_space = document.createElement('ul');
       edit_space.appendChild(button_space);
 
+      let sketch_tab_instructions = button_space.appendChild(document.createElement('li'));
+      sketch_tab_instructions.innerHTML = 'Press shift + space to insert tab.';
+
       let copy_button = document.createElement('button');
       copy_button.value = 'copy';
       copy_button.innerHTML = 'copy';
@@ -134,6 +137,7 @@ var renderCode = function(exampleName) {
       let edit_li = button_space.appendChild(document.createElement('li'));
       edit_li.appendChild(edit_button);
 
+
       function setMode(sketch, m) {
         if (m === 'edit') {
           $('.example_container').each(function(ind, con) {