HTML


<pre class="code-fill" data-type="html"><code>&lt;div&gt;
  &lt;p&gt;Code Example Inside HTML&lt;/p&gt;
&lt;/div&gt;</code></pre>

<pre class="code-fill" data-type="css"><code>.module {
  .padding: 1rem;
}
.module::after {
  content: "test";
}</code></pre>

  <pre class="code-fill" data-type="js"><code>var string = "test string";
console.log(string);

function test() {
  return "test";
}</code></pre>



CSS


/* Original @chris coyier / codepen
** Suuper trick!
** adapted => wordpress => single-post => Php json_decode + if(isset($_POST[...
** 4 CodePlay @webbeloz 
*/
* {
  box-sizing: border-box;
}
html {
  background: #fefefe;
}
body {
  max-width: 800px;
  margin: 0 auto;
  background: #fefefe;
  padding: 2rem;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  line-height: 1.4;
}
h1, h2, h3, h4 {
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
pre {
  background: #023542;
  color: #dedede;
  position: relative;
}
pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}
pre[data-type] {
  margin-top: 2.65rem;
}
pre[data-type]::before {
  content: attr(data-type);
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  left: 0;
  color: black;
  text-transform: uppercase;
}
figure {
  background: #ccc;
  margin: 0;
  padding: 1rem;
}
figcaption form {
  display: inline-block;
}
.code-svg {
  position: absolute;
  bottom: 5px;
  right: 8px;
}



JS


$(function() {
$(".code-fill").each(function() {
  
  var el = $(this),
	  type = el.data("type"),
	  codeInside = el.find("code"),
        isCodeInside = codeInside.length,
        HTML = "",
        CSS = "",
        JS = "";
      
    if (type == "html") {
      if (codeInside) {
        HTML = codeInside.html();
      } else {
        HTML = el.html();
      }
    } else if (type == "css") {
      if (codeInside) {
        CSS = codeInside.html();
      } else {
        CSS = el.html();
      }
    } else if (type == "js") {
      if (codeInside) {
        JS = codeInside.html();
      } else {
        JS = el.html();
      }
    }

    var data = {
      title              : "",
      description        : "",
      html               : HTML,
      html_pre_processor : "none",
      css                : CSS,
      css_pre_processor  : "none",
      css_starter        : "neither",
      css_prefix_free    : false,
      js                 : JS,
      js_pre_processor   : "none",
      js_modernizr       : false,
      js_library         : "",
      html_classes       : "",
      css_external       : "",
      js_external        : ""
    };
  
  var JSONstring = 
      JSON.stringify(data)
      // Quotes will screw up the JSON
  	.replace(/"/g, '"').replace(/'/g, "'");
  
  var form =
	  '<form action="http://codeplay.it/playground/7iEbi?+" method="POST" target="_blank">' + 
      '<input type="hidden" name="data" value=\'' + JSONstring + '\'>' + 
	  '<input type="image" src="http://codeplay.it/assets/play/img/svg/right.svg" width="40" height="40" value="Go!" class="code-svg">' +
      '</form>';
  el.append(form);
  });  
});





CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now