-
Notifications
You must be signed in to change notification settings - Fork 1
/
jupyter-notebook-html-report.html
497 lines (421 loc) · 30.1 KB
/
jupyter-notebook-html-report.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns# fb: https://www.facebook.com/2008/fbml">
<head>
<title>Create html Report from Jupyter Notebook on Windows - </title>
<!-- Using the latest rendering mode for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://marpat.github.io/images/fav.png" rel="icon">
<link rel="canonical" href="https://marpat.github.io/jupyter-notebook-html-report.html">
<meta name="author" content="Marcel Patek" />
<meta name="keywords" content="Jupyter-style" />
<meta name="description" content="A pointer to color-printing Jupyter notebook as a report including notebook format." />
<meta property="og:site_name" content="" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="Create html Report from Jupyter Notebook on Windows"/>
<meta property="og:url" content="https://marpat.github.io/jupyter-notebook-html-report.html"/>
<meta property="og:description" content="A pointer to color-printing Jupyter notebook as a report including notebook format."/>
<meta property="article:published_time" content="2017-08-19" />
<meta property="article:section" content="Jupyter" />
<meta property="article:tag" content="Jupyter-style" />
<meta property="article:author" content="Marcel Patek" />
<!-- Bootstrap -->
<link rel="stylesheet" href="https://marpat.github.io/theme/css/bootstrap.cerulean.min.css" type="text/css"/>
<link href="https://marpat.github.io/theme/css/font-awesome.min.css" rel="stylesheet">
<link href="https://marpat.github.io/theme/css/pygments/default.css" rel="stylesheet">
<link href="https://marpat.github.io/theme/tipuesearch/tipuesearch.css" rel="stylesheet">
<link rel="stylesheet" href="https://marpat.github.io/theme/css/style.css" type="text/css"/>
<link href="https://marpat.github.io/extras/custom.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="https://marpat.github.io/" class="navbar-brand">
Home
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="https://marpat.github.io/pages/about.html">About</a></li>
<li><a href="https://marpat.github.io/pages/contact.html">Contact</a></li>
<li><a href="https://marpat.github.io/archives.html">Archives</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span>
<form class="navbar-search" action="/search.html">
<input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input" required>
</form></span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div> <!-- /.navbar -->
<!-- Banner -->
<style>
@media screen and (min-width: 1024px){
#banner{
background-image:url("https://marpat.github.io/images/header_img.png");
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
#banner {
background-image: url(../images/header_img_767.png);
}
}
@media screen and (min-width: 415px) and (max-width: 767px) {
#banner {
background-image: url(../images/header_img_479.png);
}
}
@media screen and (max-width: 414px) {
#banner {
background-image: url(../images/header_img_412.png);
}
}
</style>
<!-- Custom header image (banner) -->
<div id="banner"></div><!-- End Banner -->
<!-- Content Container -->
<div class="container">
<div class="row">
<div class="col-sm-9">
<section id="content">
<article>
<header class="page-header">
<h1>
<a href="https://marpat.github.io/jupyter-notebook-html-report.html"
rel="bookmark"
title="Permalink to Create html Report from Jupyter Notebook on Windows">
Create html Report from Jupyter Notebook on Windows
</a>
</h1>
</header>
<div class="entry-content">
<div class="panel">
<div class="panel-body">
<footer class="post-info">
<span class="label label-default">Date</span>
<span class="published">
<i class="fa fa-calendar"></i><time datetime="2017-08-19T14:00:00-06:00"> 2017-08-19</time>
</span>
<span class="label label-default">Modified</span>
<span class="modified">
<i class="fa fa-calendar"></i><time datetime="2020-05-04T10:30:00-06:00"> 2020-05-04</time>
</span>
<span class="label label-default">Tags</span>
<a href="https://marpat.github.io/tag/jupyter-style.html">Jupyter-style</a>
</footer><!-- /.post-info --> </div>
</div>
<h2>Introduction</h2>
<p>While <a href="https://jupyter.org/">Jupyter notebook</a> has a built-in facility for multiple output formats, its use depends on OS platform and requirements on the output file. Perhaps the most requested output is <code>pdf</code> format currently done in two-steps: html to latex to pdf.<sup id=sf-jupyter-notebook-html-report-1-back><a href=#sf-jupyter-notebook-html-report-1 class=simple-footnote title="Jessica Yung, Converting Jupyter Notebooks to PDFs">1</a></sup> Unfortunately for those working on Windows, <code>Latex</code> rendering requires installation of <font color=orange>MiKTexT</font>, <font color=orange>Tex Live</font> preferred by Jupyter and Latex editor, such as <font color=orange>TeXstudio</font>. The process of getting output similar to the original notebook is quite convoluted and impractical. An alternative solution is to print notebook directly to pdf format, assuming that one has installed the pdf writer (driver) on Windows. Print-to-pdf is the done by choosing the <code>pdf</code> from the list of available printers in the print dialog.</p>
<p><br>
</p><div class="alert alert-block alert-warning">There are two issues that one may face should the desired report preserve <font color=red><strong>color</strong></font> and be within the <font color=magenta><strong>code cells</strong></font>.</div> <p></p>
<p><br>
Let's start with an illustration of sample Jupyter notebook as rendered by Jupyter.</p>
<div><img class=img-thumbnail src="./notebook/report-print/img/original_notebook.png" alt="Original notebook" title="Original notebook" <="">
</div>
<p></p><p style="margin: 20px 0 30px 125px;"><em>Fig. 1. Rendering of the original Jupyter notebook.</em> </p><p></p>
<p>Alternatively, the complete Jupyter notebook is at this link: <a href="./notebook/report-print/Sample_ipynb.ipynb">Sample_ipynb.ipynb</a> First, we export the notebook as <code>html</code> file:</p>
<p><br>
</p><div class=frameimg markdown=1>
<img alt="Printing from File menu" src="./notebook/report-print/img/dwnld_html.png" title="Fig 2.">
</div><br>
<p style="margin: 20px 0 30px 125px;"><em>Fig. 2. Exporting notebook as .html file.</em> </p>
<br><p></p>
<h3>Color rendering</h3>
<p>Printing the notebook directly (File -> Print Preview -> print (Ctrl+P)) to a printer device renders the notebook in black and white<sup id=sf-jupyter-notebook-html-report-2-back><a href=#sf-jupyter-notebook-html-report-2 class=simple-footnote title="GitHub, Color printing should be an option">2</a></sup>.</p>
<p><br>
</p><div style="border: 1px solid #ddd" markdown=1>
<img alt="Black and White print" src="./notebook/report-print/img/print_printer.png" title="Fig 3."></div><br>
<p style="margin: 20px 0 30px 125px;"><em>Fig. 3. B&W rendering of html file at the print.</em> </p>
<br><p></p>
<p>The culprit here is one line in the embedded style under the <strong>@media print</strong> section, specifically, <code>color: #000 !important</code>. This instruction overwrites default and custom colors, setting black-white as default print output.</p>
<p><br>
<img alt="css setting black font" src="./notebook/report-print/img/notebook_css.png" title="Fig 4."><br>
</p><p style="margin: -20px 0 30px 125px;"><em>Fig. 4. css/style instructions to overwrite colors.</em> </p>
<br><p></p>
<p>This offending line is coming from the Bootstrap 3 <code>.less</code> template, which is part of the Jupyter notebook styling. There are three solutions: </p>
<ul>
<li>one is to edit out this line in the <code>.less</code> file and recompile the new default <code>css</code> file for notebooks. </li>
<li>the second solution is to comment out the <code>color: #000 !important</code> line in the <code>style.min.css</code> file<sup id=sf-jupyter-notebook-html-report-3-back><a href=#sf-jupyter-notebook-html-report-3 class=simple-footnote title="Ilho Song, Mid the Gap">3</a></sup>, and </li>
<li>the third approach is to remove the same line from the embedded style section in exported (rendered) <code>html</code> file. Last two approaches are demonstrated here.
<br>
<br></li>
</ul>
<p><font color=magenta><strong><em>Editing Bootstrap style.min.css file:</em></strong></font></p>
<p>Locate the Jupyter default style sheet <code>style.min.css</code> in:</p>
<div class=highlight><pre><span></span><code><span class=x>minconda3\Lib\site-packages\notebook\static\style\style.min.css</span>
<span class=x>or</span>
<span class=x>minconda3\envs\[your_environment]\Lib\site-packages\notebook\static\style\style.min.css</span>
</code></pre></div>
<p>and search for the phrase <code>#000 !im</code>. Comment out the line shown below and save:</p>
<div class=highlight><pre><span></span><code><span class=p>@</span><span class=k>media</span> <span class=nt>print</span> <span class=p>{</span>
<span class=o>*,</span>
<span class=o>*</span><span class=p>:</span><span class=nd>before</span><span class=o>,</span>
<span class=o>*</span><span class=p>:</span><span class=nd>after</span> <span class=p>{</span>
<span class=k>background</span><span class=p>:</span> <span class=kc>transparent</span> <span class=cp>!important</span><span class=p>;</span>
<span class=c>/*color: #000 !important;*/</span> <span class=c>/*<---- comment out this line*/</span>
<span class=k>box-shadow</span><span class=p>:</span> <span class=kc>none</span> <span class=cp>!important</span><span class=p>;</span>
<span class=k>text-shadow</span><span class=p>:</span> <span class=kc>none</span> <span class=cp>!important</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div>
<p><br>
<font color=magenta><strong><em>Editing the rendered .html file file</em></strong></font></p>
<p>After creating <code>html</code> file in Jupyter notebook like so:</p>
<p>File -> Download as -> HTML (html)</p>
<p>comment out the same line as above and save.</p>
<p><br></p>
<h3>Code Cells</h3>
<p>Since notebooks are often used for education and collaborative projects, output of the code cells has been often a desired feature. On the other hand, should the ultimate result be a report for the customer, code cells could be quite distracting.</p>
<p><br>
</p><div class=img-thumbnail markdown=1>
<img alt="code cell withing the report" src="./notebook/report-print/img/original_notebook_code.png" title="Fig 5."></div><br>
<p style="margin: 20px 0 30px 125px;"><em>Fig. 5. Report with visible code cell.</em> </p>
<br><p></p>
<p>One way to suppress visibility of code cell is to use <code>JQuery</code> (javascript) in the separate Jupyter cell as per<sup id=sf-jupyter-notebook-html-report-4-back><a href=#sf-jupyter-notebook-html-report-4 class=simple-footnote title="Max Masnick, how-to-hide-code-from-cells-in-ipython-notebook-visualized-with-nbviewer">4</a></sup><sup>,</sup><sup id=sf-jupyter-notebook-html-report-5-back><a href=#sf-jupyter-notebook-html-report-5 class=simple-footnote title="Jörg Dietrich, Blogging with IPython and Collapsible Input Cells ">5</a></sup>:</p>
<div class=highlight><pre><span></span><code><span class=c1># Run (once) to allow nice html output as report (optional) </span>
<span class=sd>"""</span>
<span class=sd>Hide code cells in an IPython notebook or exported HTML using javascript. </span>
<span class=sd>"""</span>
<span class=kn>import</span> <span class=nn>IPython.core.display</span> <span class=k>as</span> <span class=nn>di</span>
<span class=c1># This line will hide code by default when the notebook is exported as HTML</span>
<span class=n>di</span><span class=o>.</span><span class=n>display_html</span><span class=p>(</span>
<span class=s1>'<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area, .output_stderr").toggle(); jQuery(".prompt").toggle();}});</script>'</span><span class=p>,</span> <span class=n>raw</span><span class=o>=</span><span class=kc>True</span><span class=p>)</span>
<span class=n>CSS</span> <span class=o>=</span> <span class=s2>""".input_area .output_stderr {height: 2.0em; overflow: hidden}"""</span> <span class=c1># changes input_subarea width to 1 visible line</span>
<span class=n>HTML</span><span class=p>(</span><span class=s1>'<style></span><span class=si>{}</span><span class=s1></style>'</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>CSS</span><span class=p>))</span>
<span class=c1># This line will add a button to toggle visibility of code blocks, for use with the HTML export version.</span>
<span class=n>di</span><span class=o>.</span><span class=n>display_html</span><span class=p>(</span><span class=s1>'''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Click in rendered .html output only, toggles the code</button>'''</span><span class=p>,</span> <span class=n>raw</span><span class=o>=</span><span class=kc>True</span><span class=p>)</span>
</code></pre></div>
<p>We can toggle visibility of the code in the html report (rendered output) displayed in the browser. </p>
<p>To remove the code completely, one can add a <font color=red>Jinja2</font> template into nbconvert-templates directory. For example, create file <code>report.tpl</code> with the following content and place it into the html directory under template folder<sup id=sf-jupyter-notebook-html-report-6-back><a href=#sf-jupyter-notebook-html-report-6 class=simple-footnote title="Gregory Ashton, Ipython NBConvert latex template to hide code">6</a></sup>. </p>
<div class=highlight><pre><span></span><code><span class=x>{%- extends 'full.tpl' -%}</span>
<span class=x>{%-block input_group scoped-%}</span>
<span class=x>{%- if 'jupyter:' and cell.cell_type == 'code'-%}</span>
<span class=x>{%- endif -%}</span>
<span class=x>{%-endblock input_group -%}</span>
</code></pre></div>
<p>The full default path to your Jupyter templates is:</p>
<div class=highlight><pre><span></span><code><span class=c1># In my case</span>
<span class=n>C</span><span class=p>:</span><span class=o>/</span><span class=n>miniconda3</span><span class=o>/</span><span class=n>envs</span><span class=o>/</span><span class=p>[</span><span class=n>my_environment</span><span class=p>]</span><span class=o>/</span><span class=n>Lib</span><span class=o>/</span><span class=n>site</span><span class=o>-</span><span class=n>packages</span><span class=o>/</span><span class=n>nbconvert</span><span class=o>/</span><span class=n>templates</span><span class=o>/</span><span class=n>html</span>
<span class=c1># or in general</span>
<span class=n>your_Python_path</span><span class=o>/</span><span class=n>Lib</span><span class=o>/</span><span class=n>site</span><span class=o>-</span><span class=n>packages</span><span class=o>/</span><span class=n>nbconvert</span><span class=o>/</span><span class=n>templates</span><span class=o>/</span><span class=n>html</span>
</code></pre></div>
<p>Then add the following cell at the end of your Jupyter notebook:</p>
<div class=highlight><pre><span></span><code><span class=c1># Create output with a template. Input code is removed</span>
<span class=kn>from</span> <span class=nn>nbconvert</span> <span class=kn>import</span> <span class=n>HTMLExporter</span>
<span class=kn>import</span> <span class=nn>codecs</span>
<span class=kn>import</span> <span class=nn>os</span>
<span class=c1># Prepare a date/time stamp to prepend to the report filename</span>
<span class=n>stamp</span> <span class=o>=</span> <span class=n>datetime</span><span class=o>.</span><span class=n>today</span><span class=p>()</span><span class=o>.</span><span class=n>strftime</span><span class=p>(</span><span class=s2>"%m_</span><span class=si>%d</span><span class=s2>_%Y"</span><span class=p>)</span>
<span class=n>exporter</span> <span class=o>=</span> <span class=n>HTMLExporter</span><span class=p>(</span><span class=n>template_file</span><span class=o>=</span><span class=s1>'report.tpl'</span><span class=p>)</span>
<span class=n>output</span><span class=p>,</span> <span class=n>resources</span> <span class=o>=</span> <span class=n>exporter</span><span class=o>.</span><span class=n>from_filename</span><span class=p>(</span><span class=s1>'Sample_ipynb.ipynb'</span><span class=p>)</span>
<span class=n>new_fnm</span> <span class=o>=</span> <span class=n>stamp</span> <span class=o>+</span> <span class=s1>'_sample_report.html'</span>
<span class=n>codecs</span><span class=o>.</span><span class=n>open</span><span class=p>(</span><span class=n>new_fnm</span><span class=p>,</span> <span class=s1>'w'</span><span class=p>,</span> <span class=n>encoding</span><span class=o>=</span><span class=s1>'utf-8'</span><span class=p>)</span><span class=o>.</span><span class=n>write</span><span class=p>(</span><span class=n>output</span><span class=p>)</span>
</code></pre></div>
<p>In this particular case, file called <font color=blue><em>sample_report.html</em></font> with prepended date-stamp will be created in your notebook directory.</p>
<p>Now, for the completeness, we can add one more cell with code to remove the <code>color: #000 !important</code> line from the html file:</p>
<div class=highlight><pre><span></span><code><span class=c1># Delete 'print B&W' instruction in css/style section </span>
<span class=n>program</span> <span class=o>=</span> <span class=nb>open</span><span class=p>(</span><span class=n>new_fnm</span><span class=p>,</span> <span class=s2>"r"</span><span class=p>)</span>
<span class=n>lines</span> <span class=o>=</span> <span class=n>program</span><span class=o>.</span><span class=n>readlines</span><span class=p>()</span>
<span class=n>program</span><span class=o>.</span><span class=n>close</span><span class=p>()</span>
<span class=n>f</span> <span class=o>=</span> <span class=nb>open</span><span class=p>(</span><span class=n>stamp</span> <span class=o>+</span> <span class=s1>'_sample_report_print.html'</span><span class=p>,</span> <span class=s2>"w"</span><span class=p>)</span>
<span class=k>for</span> <span class=n>line</span> <span class=ow>in</span> <span class=n>lines</span><span class=p>:</span>
<span class=k>if</span> <span class=ow>not</span> <span class=n>line</span><span class=o>.</span><span class=n>startswith</span><span class=p>(</span><span class=s1>' color: #000 !important'</span><span class=p>):</span>
<span class=n>f</span><span class=o>.</span><span class=n>write</span><span class=p>(</span><span class=n>line</span><span class=p>)</span>
<span class=n>f</span><span class=o>.</span><span class=n>close</span><span class=p>()</span>
<span class=n>os</span><span class=o>.</span><span class=n>remove</span><span class=p>(</span><span class=n>new_fnm</span><span class=p>)</span>
</code></pre></div>
<p><br>
Here is the rendered version of the notebook just before printing with link to complete <code>html</code> file: <a href="./notebook/report-print/08_19_2017_sample_report_print.html">sample_report_print</a></p>
<p><br>
</p><div style="border: 1px solid #ddd" markdown=1>
<img alt="fixed style in html file" src="./notebook/report-print/img/print_printer_css_mod.png" title="Fig 6."> </div>
<p style="margin: 20px 0 30px 125px;"><em>Fig. 6. Final report at the <code>print</code> stage.</em> </p>
<br><p></p>
<h3>Other ways to create reports</h3>
<p>To further customize the appearance of the report, html file without the code cells and stripped of the <code>color: #000 !important</code> line, the file is first rendered in the browser, its content selected (ctrl+a, ctrl+c) and pasted into new MS Word (Google Docs) document.</p>
<p>The style of paragraphs and tables can be changed in the word editor.</p>
<p>At this point, we should be very close to the final report style with a much improved visual appeal.</p>
<p><br>
<strong>References:</strong> </p><ol class=simple-footnotes><li id=sf-jupyter-notebook-html-report-1><a href="http://www.jessicayung.com/converting-jupyter-notebooks-to-pdfs-debugging-pdflatex-errors/">Jessica Yung, Converting Jupyter Notebooks to PDFs</a> <a href=#sf-jupyter-notebook-html-report-1-back class=simple-footnote-back>↩</a></li><li id=sf-jupyter-notebook-html-report-2><a href="https://github.com/jupyter/notebook/issues/840">GitHub, Color printing should be an option</a> <a href=#sf-jupyter-notebook-html-report-2-back class=simple-footnote-back>↩</a></li><li id=sf-jupyter-notebook-html-report-3><a href="https://ilhosong.wordpress.com/2016/12/13/388/">Ilho Song, Mid the Gap</a> <a href=#sf-jupyter-notebook-html-report-3-back class=simple-footnote-back>↩</a></li><li id=sf-jupyter-notebook-html-report-4><a href="http://stackoverflow.com/questions/27934885/how-to-hide-code-from-cells-in-ipython-notebook-visualized-with-nbviewer">Max Masnick, how-to-hide-code-from-cells-in-ipython-notebook-visualized-with-nbviewer</a> <a href=#sf-jupyter-notebook-html-report-4-back class=simple-footnote-back>↩</a></li><li id=sf-jupyter-notebook-html-report-5><a href="http://joergdietrich.github.io/notebook-collapse-input.html">Jörg Dietrich, Blogging with IPython and Collapsible Input Cells </a> <a href=#sf-jupyter-notebook-html-report-5-back class=simple-footnote-back>↩</a></li><li id=sf-jupyter-notebook-html-report-6><a href="https://ga7g08.github.io/2015/06/25/ipython-nbconvert-latex-template-to-hide-code/">Gregory Ashton, Ipython NBConvert latex template to hide code</a> <a href=#sf-jupyter-notebook-html-report-6-back class=simple-footnote-back>↩</a></li></ol>
</div>
<!-- /.entry-content -->
<hr/>
<section class="comments" id="comments">
<h2>Comments</h2>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'ntlines'; // required: replace example with your forum shortname
var disqus_config = function () {
this.language = "en";
this.page.identifier = '2017-08-19-jupyter-notebook-html-report';
this.page.url = 'https://marpat.github.io/jupyter-notebook-html-report.html';
};
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
</article>
</section>
</div>
<div class="col-sm-3" id="sidebar">
<!-- instert line here -->
<div id="photo">
</div>
<aside>
<!-- Sidebar -->
<section class="well well-sm">
<ul class="list-group list-group-flush">
<!-- Sidebar/Social -->
<li class="list-group-item">
<h4><i class="fa fa-home fa-lg"></i><span class="icon-label">Social</span></h4>
<ul class="list-group" id="social">
<li class="list-group-item"><a href="https://twitter.com/mpatek_"><i class="fa fa-twitter-square fa-lg"></i> Twitter</a></li>
<li class="list-group-item"><a href="http://www.linkedin.com/in/marcelpatek"><i class="fa fa-linkedin-square fa-lg"></i> LinkedIn</a></li>
</ul>
</li>
<!-- End Sidebar/Social -->
<!-- Sidebar/Categories -->
<li class="list-group-item">
<h4><i class="fa fa-home fa-lg"></i><span class="icon-label">Categories</span></h4>
<ul class="list-group" id="categories">
<li class="list-group-item">
<a href="https://marpat.github.io/category/blogging.html"><i class="fa fa-folder-open fa-lg"></i>Blogging</a>
</li>
<li class="list-group-item">
<a href="https://marpat.github.io/category/jupyter.html"><i class="fa fa-folder-open fa-lg"></i>Jupyter</a>
</li>
<li class="list-group-item">
<a href="https://marpat.github.io/category/structure-visualization.html"><i class="fa fa-folder-open fa-lg"></i>Structure visualization</a>
</li>
</ul>
</li>
<!-- End Sidebar/Categories -->
<!-- Sidebar/Tag Cloud -->
<li class="list-group-item">
<a href="https://marpat.github.io/tags.html"><h4><i class="fa fa-tags fa-lg"></i><span class="icon-label">Tags</span></h4></a>
<ul class="list-group list-inline tagcloud" id="tags">
<li class="list-group-item tag-4">
<a href="https://marpat.github.io/tag/crmp2.html">CRMP2</a>
</li>
<li class="list-group-item tag-4">
<a href="https://marpat.github.io/tag/jupyter-style.html">Jupyter-style</a>
</li>
<li class="list-group-item tag-4">
<a href="https://marpat.github.io/tag/miniconda.html">miniconda</a>
</li>
<li class="list-group-item tag-2">
<a href="https://marpat.github.io/tag/molecular-visualization.html">molecular visualization</a>
</li>
<li class="list-group-item tag-4">
<a href="https://marpat.github.io/tag/pelican.html">Pelican</a>
</li>
<li class="list-group-item tag-1">
<a href="https://marpat.github.io/tag/ucsf-chimera.html">UCSF Chimera</a>
</li>
</ul>
</li>
<!-- End Sidebar/Tag Cloud -->
<!-- Sidebar/Links -->
<li class="list-group-item">
<h4><i class="fa fa-external-link-square fa-lg"></i><span class="icon-label">Links</span></h4>
<ul class="list-group" id="links">
<li class="list-group-item">
<a href="https://brightrockpath.com" target="_blank">BrightRockPath consulting</a>
</li>
<li class="list-group-item">
<a href="https://nbo.marcelpatek.com/" target="_blank">NBO</a>
</li>
<li class="list-group-item">
<a href="https://chemgplus.blogspot.com" target="_blank">OrgMedChem - NBO Blogger</a>
</li>
<li class="list-group-item">
<a href="https://script-orgmedchem.blogspot.com" target="_blank">OrgMedChem - scripts</a>
</li>
<li class="list-group-item">
<a href="https://github.com/marpat/" target="_blank">Github</a>
</li>
<li class="list-group-item">
<a href="https://www.youtube.com/user/orgmedchem" target="_blank">YouTube</a>
</li>
<li class="list-group-item">
<a href="https://www.marcelpatek.com/" target="_blank">Digital Photography</a>
</li>
</ul>
</li>
<!-- End Sidebar/Links -->
</ul>
</section>
<!-- End Sidebar --> </aside>
</div>
</div>
</div>
<!-- End Content Container -->
<footer>
<div class="container">
<hr>
<div class="row">
<div class="col-xs-10">© 2020 Marcel Patek
· Powered by <a href="https://github.com/getpelican/pelican-themes/tree/master/pelican-bootstrap3" target="_blank">pelican-bootstrap3</a>,
<a href="http://docs.getpelican.com/" target="_blank">Pelican</a>,
<a href="http://getbootstrap.com" target="_blank">Bootstrap</a> </div>
<div class="col-xs-2"><p class="pull-right"><i class="fa fa-arrow-up"></i> <a href="#">Back to top</a></p></div>
</div>
</div>
</footer>
<script src="https://marpat.github.io/theme/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://marpat.github.io/theme/js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="https://marpat.github.io/theme/js/respond.min.js"></script>
<script src="https://marpat.github.io/theme/js/bodypadding.js"></script>
<!-- Disqus -->
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'ntlines'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<!-- End Disqus Code -->
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-168064558-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End Google Analytics Code -->
</body>
</html>