<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rrenula/pen/qmaFb?q=code%20editor&limit=all&order=popularity&depth=everything&show_forks=false" />
<style class="cp-pen-styles">body {
background: #e16a3f;
}
.code-editor:before,
.code-editor:after,
.code-editor span.control:before,
.code-editor span.after:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
content: '';
position: absolute;
z-index: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: wall .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.code-editor {
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 40px auto 0 auto;
width: 750px;
text-align: left;
background-color: #473431;
border-radius: 0 0 5px 5px;
overflow: auto;
-webkit-transition: all .5s ease-in-out;
-moz-transition: wall .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.code-editor:before {
content: 'Code Editor';
font-family: 'Consolas';
color: #222;
padding-top: 6px;
text-align: center;
top: 25px;
width: 750px;
height: 30px;
background-color: #fafafa;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.code-editor span.control:before {
content: '';
top: 34px;
z-index: 2;
padding: 6px;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-webkit-border-radius: 20px;
}
.code-editor span.control:nth-child(1):before {
margin-left: 15px;
background-color: #df6963;
}
.code-editor span.control:nth-child(2):before {
margin-left: 35px;
background-color: #f5e18a;
}
.code-editor span.control:nth-child(3):before {
margin-left: 55px;
background-color: #97c38a;
}
/* -- iPad Screen -- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
.code-editor {
width: 500px;
}
.code-editor:before {
width: 500px;
}
}
/* -- iPhone Screen -- */
@media only screen and (max-width: 479px) {
.code-editor {
width: 300px;
}
.code-editor:before {
width: 300px;
}
}
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0em 0;
height: 500px;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #473431;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
-moz-border-radius: .3em;
-o-border-radius: .3em;
-webkit-border-radius: .3em;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url
{
color: #67cdcc;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
padding-bottom: 1px;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -13em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
background-color: #322422;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}</style></head><body>
<div class="code-editor">
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<pre class="line-numbers">
<code class="language-css">
/*
Just another pure CSS code editor design.
Designed based on @roybarberuk's amazing Dribbble shot.
Dribbble shot: http://dribbble.com/shots/1022371-Landing-Page-Element
Lea Verou's Prism syntax highlighter is used along with
the line number plugin and the Tomorrow-Theme.
*/
body {
background: #e16a3f;
}
.code-editor:before,
.code-editor:after,
.code-editor span.control:before,
.code-editor span.after:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
content: '';
position: absolute;
z-index: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: wall .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.code-editor {
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 40px auto 0 auto;
width: 750px;
text-align: left;
background-color: #473431;
border-radius: 0 0 5px 5px;
overflow: auto;
-webkit-transition: all .5s ease-in-out;
-moz-transition: wall .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.code-editor:before {
content: 'Code Editor';
font-family: 'Consolas';
color: #222;
padding-top: 6px;
text-align: center;
top: 25px;
width: 750px;
height: 30px;
background-color: #fafafa;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.code-editor span.control:before {
content: '';
top: 34px;
z-index: 2;
padding: 6px;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-webkit-border-radius: 20px;
}
.code-editor span.control:nth-child(1):before {
margin-left: 15px;
background-color: #df6963;
}
.code-editor span.control:nth-child(2):before {
margin-left: 35px;
background-color: #f5e18a;
}
.code-editor span.control:nth-child(3):before {
margin-left: 55px;
background-color: #97c38a;
}
/* -- iPad Screen -- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
.code-editor {
width: 500px;
}
.code-editor:before {
width: 500px;
}
}
/* -- iPhone Screen -- */
@media only screen and (max-width: 479px) {
.code-editor {
width: 300px;
}
.code-editor:before {
width: 300px;
}
}</code></pre>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license https://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e){if (window.CP.shouldStopExecution(1)){break;}e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));
window.CP.exitedLoop(1);
}return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n){if (window.CP.shouldStopExecution(2)){break;}r[i]=n[i];}
window.CP.exitedLoop(2);
return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s){if (window.CP.shouldStopExecution(4)){break;}if(s.hasOwnProperty(u)){if(u==n)for(var a in r){if (window.CP.shouldStopExecution(3)){break;}r.hasOwnProperty(a)&&(o[a]=r[a]);}
window.CP.exitedLoop(3);
o[u]=s[u]}}
window.CP.exitedLoop(4);
return i[e]=o},DFS:function(e,n){for(var r in e){if (window.CP.shouldStopExecution(5)){break;}n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}
window.CP.exitedLoop(5);
}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];){if (window.CP.shouldStopExecution(6)){break;}t.highlightElement(s,e===!0,n)
window.CP.exitedLoop(6);
}},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className)){if (window.CP.shouldStopExecution(7)){break;}a=a.parentNode;}
window.CP.exitedLoop(7);
if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o){if (window.CP.shouldStopExecution(8)){break;}n[u]=o[u];}
window.CP.exitedLoop(8);
delete n.rest}e:for(var u in n){if (window.CP.shouldStopExecution(10)){break;}if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){if (window.CP.shouldStopExecution(9)){break;}var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}
window.CP.exitedLoop(9);
}
window.CP.exitedLoop(10);
return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];){if (window.CP.shouldStopExecution(11)){break;}s(n)}
window.CP.exitedLoop(11);
}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes){if (window.CP.shouldStopExecution(12)){break;}o+=u+'="'+(s.attributes[u]||"")+'"';}
window.CP.exitedLoop(12);
return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
;
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
;
//# sourceURL=pen.js
</script>
</body></html>
