"editor"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: