Skip to content

Commit f1d7a15

Browse files
jonas-braunjonas-braun
committed
new css layout for jupyter-notebook-style code blocks and syntax highlighting
1 parent 62c66bb commit f1d7a15

File tree

6 files changed

+234
-2
lines changed

6 files changed

+234
-2
lines changed

‎_config.yml

+2
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,5 @@ map:
3636
- title: Open Data
3737
path: /extras/opendata.html
3838
caption: Some places to find open data sets.
39+
kramdown:
40+
parse_block_html: true

‎_layouts/ots-jupyter.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
7+
<title>OpenTechSchool – {{ page.title }}</title>
8+
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
9+
<link href="{{site.baseurl}}/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
10+
<link href="{{site.baseurl}}/css/pygments-default.css" rel="stylesheet" media="screen">
11+
<link href="{{site.baseurl}}/css/styles.css" rel="stylesheet" media="screen">
12+
13+
<link rel="icon" href="{{site.baseurl}}/favicon.ico" type="image/png">
14+
</head>
15+
<body>
16+
<div class="navbar navbar-inverse navbar-static-top">
17+
<div class="navbar-inner">
18+
<div class="container-fluid">
19+
<div class="row-fluid">
20+
<div class="span3"><a href="http://www.opentechschool.org/" target="_blank"><h1>OpenTechSchool</a></h1></div>
21+
<div class="span6"><h1><a href="{{site.baseurl}}/">{{site.title}}</a></h1></div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div id="main-content" class="container-fluid">
28+
29+
<div class="row-fluid">
30+
<h1 class="title">{{ page.title }}</h1>
31+
<hr>
32+
</div>
33+
34+
<div class="row-fluid">
35+
36+
<div class="span3 well sidebar-nav">
37+
<ul class="nav nav-list">
38+
{% for p in site.map %}
39+
<li class="nav-header">
40+
{% if p.path %}
41+
<a href="{{site.baseurl}}{{p.path}}" alt="{{ p.caption }}">{{p.title}}</a>
42+
{% else %}
43+
{{p.title}}
44+
{% endif %}
45+
</li>
46+
{% for s in p.subpages %}
47+
<li><a href="{{site.baseurl}}{{s.path}}" alt="{{ s.caption }}">{{s.title}}</a></li>
48+
{% endfor %}
49+
{% endfor %}
50+
</ul>
51+
</div>
52+
53+
<div id="main-content" class="span9">
54+
{{ content }}
55+
</div>
56+
57+
</div>
58+
59+
</div>
60+
61+
<div id="footer">
62+
<p>
63+
© 2013-2014 - made by <a href="http://www.opentechschool.org">OpenTechSchool</a> and its <a href="https://github.com/OpenTechSchool/html-css-beginners/graphs/contributors">Contributors</a>&nbsp;&nbsp;||&nbsp;&nbsp;<a href="http://www.opentechschool.org/imprint.html">Impressum</a>
64+
</p>
65+
</div>
66+
67+
<script src="http://code.jquery.com/jquery-latest.js"></script>
68+
<script src="{{site.baseurl}}/bootstrap/js/bootstrap.min.js"></script>
69+
<script src="{{site.baseurl}}/js/spoilers.js"></script>
70+
<script src="{{site.baseurl}}/js/jupyter-hide-output.js"></script>
71+
</body>
72+
</html>

‎core/recap.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22

3-
layout: ots
3+
layout: ots-jupyter
44
title: Python and Jupyter-Notebook (Recap)
55

66
---

‎css/pygments-default.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* https://raw.githubusercontent.com/jwarby/jekyll-pygments-themes/master/default.css */
2+
.highlight .hll { background-color: #ffffcc }
3+
.highlight .c { color: #408080; font-style: italic } /* Comment */
4+
.highlight .err { border: 1px solid #FF0000 } /* Error */
5+
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
6+
.highlight .o { color: #666666 } /* Operator */
7+
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
8+
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
9+
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
10+
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
11+
.highlight .gd { color: #A00000 } /* Generic.Deleted */
12+
.highlight .ge { font-style: italic } /* Generic.Emph */
13+
.highlight .gr { color: #FF0000 } /* Generic.Error */
14+
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
15+
.highlight .gi { color: #00A000 } /* Generic.Inserted */
16+
.highlight .go { color: #808080 } /* Generic.Output */
17+
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
18+
.highlight .gs { font-weight: bold } /* Generic.Strong */
19+
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
20+
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
21+
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
22+
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
23+
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
24+
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
25+
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
26+
.highlight .kt { color: #B00040 } /* Keyword.Type */
27+
.highlight .m { color: #666666 } /* Literal.Number */
28+
.highlight .s { color: #BA2121 } /* Literal.String */
29+
.highlight .na { color: #7D9029 } /* Name.Attribute */
30+
.highlight .nb { color: #008000 } /* Name.Builtin */
31+
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
32+
.highlight .no { color: #880000 } /* Name.Constant */
33+
.highlight .nd { color: #AA22FF } /* Name.Decorator */
34+
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
35+
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
36+
.highlight .nf { color: #0000FF } /* Name.Function */
37+
.highlight .nl { color: #A0A000 } /* Name.Label */
38+
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
39+
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
40+
.highlight .nv { color: #19177C } /* Name.Variable */
41+
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
42+
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
43+
.highlight .mf { color: #666666 } /* Literal.Number.Float */
44+
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
45+
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
46+
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
47+
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
48+
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
49+
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
50+
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
51+
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
52+
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
53+
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
54+
.highlight .sx { color: #008000 } /* Literal.String.Other */
55+
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
56+
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
57+
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
58+
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
59+
.highlight .vc { color: #19177C } /* Name.Variable.Class */
60+
.highlight .vg { color: #19177C } /* Name.Variable.Global */
61+
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
62+
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
63+

‎css/styles.css renamed to ‎css/styles.scss

+71-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
---
3+
34
/* keep the above dashes for jekyll to preprocess this file */
45
body {
56
background: url("{{site.baseurl}}/images/background.png") #FFF repeat fixed;
@@ -28,7 +29,6 @@ pre {
2829

2930
pre code {
3031
font-size: 15px;
31-
background: #222222 !important;
3232
}
3333

3434
.navbar h1 a, .navbar h1 {
@@ -94,3 +94,73 @@ pre code {
9494
color: #FFF;
9595
}
9696

97+
pre.highlight {
98+
color: #F9FBFB;
99+
background-color: #300A24;
100+
}
101+
102+
103+
/* jupyter highlight style */
104+
$indent: 120px;
105+
106+
div.jupyter {
107+
border: 1px black solid;
108+
border-color: #ababab;
109+
border-left: 5px #42A5F5 solid;
110+
111+
pre.highlight {
112+
position: relative;
113+
margin: 10px;
114+
margin-left: $indent;
115+
border: 1px solid #CFCFCF;
116+
border-radius: 2px;
117+
background-color: #F7F7F7;
118+
}
119+
pre.highlight::before {
120+
display: block;
121+
box-sizing: border-box;
122+
position: absolute;
123+
left: - $indent;
124+
content: "In [ ]:";
125+
width: $indent;
126+
text-align: right;
127+
padding-right: 12px;
128+
}
129+
130+
/* reset for following output fields */
131+
div.highlighter-rouge + div.highlighter-rouge {
132+
133+
pre.highlight {
134+
background-color: white;
135+
border: none;
136+
// filter: blur(2px);
137+
138+
}
139+
140+
pre.highlight::before {
141+
content: "";
142+
}
143+
}
144+
145+
code {
146+
display: block;
147+
//height: auto;
148+
overflow: hidden;
149+
transition: height 250ms ease-in-out;
150+
}
151+
}
152+
153+
.button-hide {
154+
font-size: 80%;
155+
position: absolute;
156+
top: 10px;
157+
left: - $indent + 15;
158+
159+
}
160+
.output-hidden {
161+
code {
162+
height: 0 !important;
163+
}
164+
}
165+
166+

‎js/jupyter-hide-output.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
window.onload = function() {
2+
// find all output code elements
3+
4+
var elements = document.querySelectorAll('.jupyter pre.highlight');
5+
for (var element of elements) {
6+
var content = window.getComputedStyle(element, ':before').getPropertyValue('content');
7+
if (content == '""') {
8+
// attach button and hide content
9+
var button = document.createElement("button");
10+
button.innerHTML = 'show';
11+
button.classList.add("button-hide");
12+
button.onclick = function() {
13+
var code = this.parentElement; //.querySelector('code');
14+
code.classList.toggle("output-hidden");
15+
}
16+
element.appendChild(button);
17+
18+
var code = element.querySelector('code');
19+
code.dataset.height = code.scrollHeight + 'px';
20+
code.style.height = code.dataset.height;
21+
element.classList.add("output-hidden");
22+
}
23+
}
24+
};
25+

0 commit comments

Comments
 (0)