<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="panel panel-default panel-code"> <div class="panel-body"> <div class="row tools"> <ul class="nav nav-pils navbar-right"> <li role="presentation"> <a href="#" class="btn"> <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> </a> </li> </ul> <ul class="nav nav-tabs" id="code-tabs"> <li role="presentation" class="active" id="highlight_tab"><a href="#">Home</a></li> <li role="presentation" id="raw_tab"><a href="#">Raw</a></li> <li role="presentation" id="desc_tab"><a href="#">Description</a></li> </ul> </div> <div class="highlight collapse in" id="highlight"> <ol id="ggg"> <li><div class="codeline"><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span></div></li> <li><div class="codeline">    <span class="nb">print</span><span class="p">(</span><span class="s">'Hello!'</span><span class="p">)</span></div></li> <li><div class="codeline">'''aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' </div></li> <li><div class="codeline"><span class="n">hello</span><span class="p">()</span></div></li> </ol> </div> <div id="raw" class="collapse"> <form> <textarea class="form-control" id="raw-ta"> def hello(): print('Hello!') hello() </textarea> </form> </div> <div id="desc" class="collapse"> <form> <textarea class="form-control">helloworld snippet</textarea> </form> </div> </div> </div> </div>

.hll { background-color: #ffffcc } .c { color: #408080; font-style: italic } /* Comment */ .err { border: 1px solid #FF0000 } /* Error */ k { color: #008000; font-weight: bold } /* Keyword */.o { color: #666666 } /* Operator */.cm { color: #408080; font-style: italic } /* Comment.Multiline */.cp { color: #BC7A00 } /* Comment.Preproc */.c1 { color: #408080; font-style: italic } /* Comment.Single */.cs { color: #408080; font-style: italic } /* Comment.Special */.gd { color: #A00000 } /* Generic.Deleted */.ge { font-style: italic } /* Generic.Emph */.gr { color: #FF0000 } /* Generic.Error */.gh { color: #000080; font-weight: bold } /* Generic.Heading */.gi { color: #00A000 } /* Generic.Inserted */.go { color: #888888 } /* Generic.Output */.gp { color: #000080; font-weight: bold } /* Generic.Prompt */.gs { font-weight: bold } /* Generic.Strong */.gu { color: #800080; font-weight: bold } /* Generic.Subheading */.gt { color: #0044DD } /* Generic.Traceback */.kc { color: #008000; font-weight: bold } /* Keyword.Constant */.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */.kp { color: #008000 } /* Keyword.Pseudo */.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */.kt { color: #B00040 } /* Keyword.Type */.m { color: #666666 } /* Literal.Number */.s { color: #BA2121 } /* Literal.String */.na { color: #7D9029 } /* Name.Attribute */.nb { color: #008000 } /* Name.Builtin */.nc { color: #0000FF; font-weight: bold } /* Name.Class */.no { color: #880000 } /* Name.Constant */.nd { color: #AA22FF } /* Name.Decorator */.ni { color: #999999; font-weight: bold } /* Name.Entity */.ne { color: #D2413A; font-weight: bold } /* Name.Exception */.nf { color: #0000FF } /* Name.Function */.nl { color: #A0A000 } /* Name.Label */.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */.nt { color: #008000; font-weight: bold } /* Name.Tag */.nv { color: #19177C } /* Name.Variable */.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */.w { color: #bbbbbb } /* Text.Whitespace */.mb { color: #666666 } /* Literal.Number.Bin */.mf { color: #666666 } /* Literal.Number.Float */.mh { color: #666666 } /* Literal.Number.Hex */.mi { color: #666666 } /* Literal.Number.Integer */.mo { color: #666666 } /* Literal.Number.Oct */.sb { color: #BA2121 } /* Literal.String.Backtick */.sc { color: #BA2121 } /* Literal.String.Char */.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */.s2 { color: #BA2121 } /* Literal.String.Double */.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */.sh { color: #BA2121 } /* Literal.String.Heredoc */.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */.sx { color: #008000 } /* Literal.String.Other */.sr { color: #BB6688 } /* Literal.String.Regex */.s1 { color: #BA2121 } /* Literal.String.Single */.ss { color: #19177C } /* Literal.String.Symbol */.bp { color: #008000 } /* Name.Builtin.Pseudo */.vc { color: #19177C } /* Name.Variable.Class */.vg { color: #19177C } /* Name.Variable.Global */.vi { color: #19177C } /* Name.Variable.Instance */.il { color: #666666 } /* Literal.Number.Integer.Long */ .panel-code .panel-body { padding: 0; background: #f9f9f9; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .row.tools { margin-right: 0; margin-left: 0; } .nav#code-tabs { padding-left: 39px; } ol { margin: 0; padding-left: 50px #000; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .highlight { overflow-wrap: break-word; } .highlight li { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .highlight li:nth-child(even){ background: #ffffff; } .highlight li:nth-child(odd){ background: #f9f9f9; } .codeline { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif; border-left: 1px solid #ccc; padding:0 5px; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; margin: 0 0 0 -1px; position: relative; width: auto; } .codeline:after { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .formcontrol { resize: none; border-width: 0; } .tools .navbar-right { margin-right: 0; }

var old_tab; var old; var height; function switch_tab(new_tab, new_body){ old_tab.removeClass("active"); old.collapse("hide"); new_tab.addClass('active'); new_body.collapse('show'); old_tab = new_tab; old = new_body; } $('document').ready(function(){ var highlight_tab = $('#highlight_tab'); var highlight = $('#highlight'); var raw_tab = $('#raw_tab'); var raw = $('#raw'); var desc_tab = $('#desc_tab'); var desc = $('#desc'); old_tab = highlight_tab; old = highlight; height = $('#ggg').height(); highlight_tab.click(function(){ if(old_tab != highlight_tab){ switch_tab(highlight_tab, highlight); } }); raw_tab.click(function(){ if(old_tab != raw_tab){ $('textarea').height(old.height()); switch_tab(raw_tab, raw); } }); desc_tab.click(function(){ if(old_tab != desc_tab){ $('textarea').height(old.height()); switch_tab(desc_tab, desc); } }) });