"source-highlight"
Bootstrap 3.3.0 Snippet by NoNameItem

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit
Semi Transparent Highlight Box

Questions / Comments: