<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/Si1kIfY/pen/BkDeF?q=code%20editor&limit=all&order=popularity&depth=everything&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">*,
*:after,
*:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: always;
}
body {
font-family: open-sans, Arial, sans-serif;
background-color: #71D4B7;
font-size: 62.5%;
}
body label {
background-color: white;
color: #000;
padding: 10px 15px;
font-size: 18px;
font-weight: bold;
display: inline-block;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
body label:hover {
background-color: rgba(255, 255, 255, 0.75);
}
body label:hover ~ h1 {
display: block;
}
body input {
display: none;
}
body input:checked ~ h1 {
display: block;
}
body input:checked ~ label {
background-color: rgba(255, 255, 255, 0.75);
}
body h1 {
display: none;
font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
font-size: 18px;
color: #000;
background-color: #fff;
padding: 10px;
position: absolute;
left: 55px;
top: 10px;
box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);
z-index: 999;
}
body h1:hover {
display: block;
}
body h1 a, body h1 a:visited, body h1 a:hover {
color: #000;
}
.code-editor {
width: 800px;
margin: 20px auto;
}
.code-editor.fullscreen {
width: calc(100% - 40px);
position: fixed;
height: calc(100% - 120px);
margin: 20px;
}
.code-editor .controls {
background-color: #E8ECEF;
font-size: 10px;
font-size: 1rem;
display: block;
padding: 15px;
text-align: right;
-webkit-border-top-left-radius: 6px;
-ms-border-top-left-radius: 6px;
-moz-border-top-left-radius: 6px;
-o-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-ms-border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
-o-border-top-right-radius: 6px;
border-top-right-radius: 6px;
}
.code-editor .controls i {
color: #BAC1C9;
cursor: pointer;
margin-left: 15px;
}
.code-editor .controls i:hover {
color: #818e9c;
}
.code-editor .embed-nav {
background-color: #384a56;
padding: 15px;
}
.code-editor .embed-nav ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.code-editor .embed-nav ul li {
margin-right: 10px;
}
.code-editor .embed-nav ul li a {
font-size: 8px;
font-size: 0.8rem;
color: #BAC1C9;
padding: 5px 10px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
text-decoration: none;
}
.code-editor .embed-nav ul li a.active {
background-color: #233038;
}
.code-editor .embed-nav .logo-wrap {
display: none;
}
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-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: 0 15px 15px 15px;
overflow: auto;
font-size: 10px;
font-size: 1rem;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #4e606c;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #9cacb7;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.function {
color: #F5755A;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol {
color: #71D4B7;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
color: #FC659A;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #EFB26E;
}
.token.atrule,
.token.attr-value {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}
.token.deleted {
color: red;
}
.token.inserted {
color: green;
}
pre.line-numbers {
position: relative;
padding-left: 55px;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 22px;
font-size: 100%;
left: -100px;
width: 40px;
/* works for line-numbers below 1000 lines */
letter-spacing: -1px;
color: #879BA6;
-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>
<!--
Callum Silcock 2014
Flat Code Editor
Inspired by Dribbble Shot
https://dribbble.com/shots/1016617-Web-Development-Icon
-->
<head>
<title>
Flat Code Editor
</title>
<script src='//use.edgefonts.net/open-sans:n4,i4,n7.js'></script>
</head>
<body>
<!-- Pen Information -->
<input id="info" name="info" type="checkbox">
<label for="info">i</label>
<h1>Inspired by <a href="https://dribbble.com/shots/1016617-Web-Development-Icon" target="blank">Chris Smith's dribble shot</a>
<br />
~Callum Silcock 2014 | <a href="https://twitter.com/cub3" target="_blank">@Cub3</a></h1>
<!-- Code Editor -->
<section class='code-editor'>
<div class='controls'>
<i class="fa fa-expand fullscreen"></i>
<i class="fa fa-chevron-up accordion"></i>
</div>
<div class='embed-nav'>
<ul>
<li>
<a href='#html-box' id='html-link'>
HTML
</a>
</li>
<li>
<a class='active' href='#css-box' id='css-link'>
SCSS
</a>
</li>
<li>
<a href='#js-box' id='js-link'>
JS
</a>
</li>
<li>
<a href='#result-box' id='result-link'>
Result
</a>
</li>
</ul>
<div class='logo-wrap'>
<a href='#' target='_blank' title='Edit on CodePen'>
Edit on codepen
</a>
</div>
</div>
<pre class='line-numbers'>
<code class='language-scss'>
//Variables
$font-stack: open-sans, Arial, sans-serif;
$base-font: 62.5%; //I like my rem's even (1rem = 10px)
$page-bg: #71D4B7;
$code-top: #E8ECEF;
$code-text: #BAC1C9;
$code-bg: #4e606c;
$code-nav: #384a56;
$code-nav-select: #233038;
$code-selector: #FC659A;
$code-property: #71D4B7;
$code-linenumbers: #879BA6;
$code-comment: lighten($code-bg,30%);
body {
font-family: $font-stack;
padding: 20px;
background-color: $page-bg;
font-size: 62.5%;
}
</code>
</pre>
</section>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function(){
// Fullscreen Functionality
// Put this together quickly so needs to be improved
$('.code-editor .fullscreen').on( "click", function() {
var windowHeight = $(window).height() - 132;
if($('.code-editor').hasClass('fullscreen')){
$('.code-editor').removeClass('fullscreen');
$(this).addClass('fa-expand').removeClass('fa-compress');
$('.code-editor pre').css({height: 'auto'});
} else {
$('.code-editor').addClass('fullscreen');
$(this).removeClass('fa-expand').addClass('fa-compress');
$('.code-editor pre').css({height: windowHeight});
}
});
// Accordion functionality
$('.code-editor .accordion').on( "click", function() {
$(this)
.toggleClass('fa-chevron-up')
.toggleClass('fa-chevron-down')
.parent().parent()
.children()
.not('.controls')
.slideToggle();
});
});
// Prism.js Plugin
//
// http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+php+scss+bash&plugins=line-numbers
//
//-------------------------------
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},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 a={};for(var r in e){if (window.CP.shouldStopExecution(1)){break;}e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));
window.CP.exitedLoop(1);
}return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n){if (window.CP.shouldStopExecution(2)){break;}a[r]=n[r];}
window.CP.exitedLoop(2);
return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e],l={};for(var o in i){if (window.CP.shouldStopExecution(4)){break;}if(i.hasOwnProperty(o)){if(o==n)for(var s in a){if (window.CP.shouldStopExecution(3)){break;}a.hasOwnProperty(s)&&(l[s]=a[s]);}
window.CP.exitedLoop(3);
l[o]=i[o]}}
window.CP.exitedLoop(4);
return r[e]=l},DFS:function(e,n){for(var a in e){if (window.CP.shouldStopExecution(5)){break;}n.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],n)}
window.CP.exitedLoop(5);
}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];){if (window.CP.shouldStopExecution(6)){break;}t.highlightElement(a,e===!0,n)}
window.CP.exitedLoop(6);
},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);){if (window.CP.shouldStopExecution(7)){break;}s=s.parentNode;}
window.CP.exitedLoop(7);
if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var c=a.textContent;if(c){var g={element:a,language:l,grammar:o,code:c};if(t.hooks.run("before-highlight",g),r&&self.Worker){var u=new Worker(t.filename);u.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i){if (window.CP.shouldStopExecution(8)){break;}n[l]=i[l];}
window.CP.exitedLoop(8);
delete n.rest}e:for(var l in n){if (window.CP.shouldStopExecution(11)){break;}if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){if (window.CP.shouldStopExecution(10)){break;}var c=o[s],g=c.inside,u=!!c.lookbehind,f=0,h=c.alias;c=c.pattern||c;for(var p=0;p<r.length;p++){if (window.CP.shouldStopExecution(9)){break;}var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}
window.CP.exitedLoop(9);
}
window.CP.exitedLoop(10);
}}
window.CP.exitedLoop(11);
return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];){if (window.CP.shouldStopExecution(12)){break;}r(n)}
window.CP.exitedLoop(12);
}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes){if (window.CP.shouldStopExecution(13)){break;}o+=s+'="'+(i.attributes[s]||"")+'"';}
window.CP.exitedLoop(13);
return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\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(t){"entity"===t.type&&(t.attributes.title=t.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*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,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_]+\(/gi,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(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\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>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
Prism.languages.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/gi,constant:/\b[A-Z0-9_]{2,}\b/g,comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])(\/\/|#).*?(\r?\n|$))/g,lookbehind:!0}}),Prism.languages.insertBefore("php","keyword",{delimiter:/(\?>|<\?php|<\?)/gi,variable:/(\$\w+)\b/gi,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{punctuation:/\\/}}}),Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/g,lookbehind:!0}}),Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(e){"php"===e.language&&(e.tokenStack=[],e.backupCode=e.code,e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/gi,function(n){return e.tokenStack.push(n),"{{{PHP"+e.tokenStack.length+"}}}"}))}),Prism.hooks.add("before-insert",function(e){"php"===e.language&&(e.code=e.backupCode,delete e.backupCode)}),Prism.hooks.add("after-highlight",function(e){if("php"===e.language){for(var n,a=0;n=e.tokenStack[a];a++){if (window.CP.shouldStopExecution(14)){break;}e.highlightedCode=e.highlightedCode.replace("{{{PHP"+(a+1)+"}}}",Prism.highlight(n,e.grammar,"php"));}
window.CP.exitedLoop(14);
e.element.innerHTML=e.highlightedCode}}),Prism.hooks.add("wrap",function(e){"php"===e.language&&"markup"===e.type&&(e.content=e.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'<span class="token php">$1</span>'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/<[^?]\/?(.*?)>/g,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/g}));;
Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});;
Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join("<span></span>"),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});;
//# sourceURL=pen.js
</script>
</body></html>
