<pre class="codepen-able" data-type="html"><code>&lt;div>
  &lt;p>I'm example HTML&lt;/p>
&lt;div></code></pre>

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

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

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

* {
  box-sizing: border-box;
}
html {
  background: #222;
}
body {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  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: #222;
  color: white;
  position: relative;
}
pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}
pre[data-type] {
  margin-top: 2rem;
}
pre[data-type]::before {
  content: attr(data-type);
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  left: 0;
  color: black;
}
figure {
  background: #ccc;
  margin: 0;
  padding: 1rem;
}
figcaption form {
  display: inline-block;
}

.codepen-mover-button {
  position: absolute;
  bottom: 5px;
  right: 8px;
}

$(function() {
$(".codepen-able").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              : "Cool Pen",
      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        : "",
	  template           : true
    };

    var JSONstring = 
      JSON.stringify(data)
      // Quotes will screw up the JSON
      .replace(/"/g, """)
      .replace(/'/g, "'");

    var form = 
      '<form action="https://codepen.io/pen/define" method="POST" target="_blank">' + 
        '<input type="hidden" name="data" value=\'' + 
          JSONstring + 
          '\'>' + 
        '<input type="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg" width="40" height="40" value="Create New Pen with Prefilled Data" class="codepen-mover-button">' +
      '</form>';

    el.append(form);

  });
  
});