Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f1d7a15

Browse files
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‎

Lines changed: 2 additions & 0 deletions
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‎

Lines changed: 72 additions & 0 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 63 additions & 0 deletions
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‎

Lines changed: 71 additions & 1 deletion
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‎

Lines changed: 25 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /