Add live code editing using thebelab

execute.py

@@ -19,6 +19,7 @@ shutil.rmtree(target, ignore_errors=True)
 target.mkdir(exist_ok=True)
 shutil.copytree(src / 'figures', target / 'figures')
 shutil.copytree(src / 'scripts', target / 'scripts')
+shutil.copytree(src / 'styles', target / 'styles')
 shutil.copytree(src / 'x3d', target / 'x3d')
 
 output_extractor = ExtractOutputPreprocessor()
@@ -34,7 +35,7 @@ exporter = nbconvert.MarkdownExporter(
                 nbconvert.preprocessors.ExecutePreprocessor,
                 output_extractor,
             ],
-            exclude_input=True,
+            exclude_input=False,
             template_file='extra_markdown.tpl',
         ),
         NbConvertBase=dict(

extra_markdown.tpl

@@ -21,6 +21,30 @@ window.addEventListener('load', function() {
 {%- endfor -%}
 {%- endblock -%}
 
+{% block input %}
+{% if cell.metadata.attributes and cell.metadata.attributes.initialize %}
+<div class="thebelab-init-code">
+  <pre class="thebelab-code" data-executable="true" data-language="python">
+    {{cell.source}}
+  </pre>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block data_svg %}
+{% if cell.metadata.attributes and cell.metadata.attributes.editable %}
+<pre class="thebelab-code" data-executable="true" data-language="python">{{cell.source}}</pre>
+<div class="thebelab-output" data-output="true" markdown="1">
+{{ super() }}
+</div>
+<button class="thebelab-button thebelab-activate-button" onclick="initThebelab()">
+  Enable live code
+</button>
+{% else %}
+{{ super() }}
+{% endif %}
+{% endblock %}
+
 {% block error %}
 {% endblock error %}
 

mkdocs.yml

@@ -46,13 +46,19 @@ markdown_extensions:
       permalink: True
   - admonition
   - pymdownx.details
+  - pymdownx.extra
   - abbr
   - footnotes
   - meta
 
+extra_css:
+  - 'styles/thebelab.css'
+
 extra_javascript:
   - 'https://cdn.plot.ly/plotly-latest.min.js'
   - 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS_HTML'
+  - 'scripts/thebelab-custom.js'
   - 'scripts/mathjaxhelper.js'
+  - 'scripts/thebelabhelper.js'
   - 'scripts/x3dom.js'
 copyright: "Copyright © 2017-2019 Delft University of Technology, CC-BY-SA 4.0."

src/1_einstein_model.md

@@ -12,7 +12,7 @@ jupyter:
     name: python3
 ---
 
-```python
+```{python initialize=true}
 import pandas
 
 from matplotlib import pyplot
@@ -92,7 +92,7 @@ The equipartition theorem states that each of these 6 degrees of freedom contrib
 
 Things start looking more complex when we study (following Einstein) the temperature dependence of the heat capacity of diamond[^2]:
 
-```python
+```{python editable='true'}
 # Data from Einstein's paper
 T = [222.4, 262.4, 283.7, 306.4, 331.3, 358.5, 413.0, 479.2, 520.0, 879.7, 1079.7, 1258.0]
 c = [0.384, 0.578, 0.683, 0.798, 0.928, 1.069, 1.343, 1.656, 1.833, 2.671, 2.720, 2.781]
@@ -115,7 +115,7 @@ So we see that:
 
 This can be explained by considering a _quantum_ harmonic oscillator:
 
-```python
+```{python editable=true}
 import math
 from numpy.polynomial.hermite import Hermite
 

src/scripts/thebelabhelper.js

+function initThebelab() {
+    thebelab.bootstrap();
+    // Run all thebelab cells marked as initialization code
+    setTimeout(function() {
+        let initDivs = document.getElementsByClassName("thebelab-init-code");
+        for(var i = 0; i < initDivs.length; i++) {
+            // div.thebelab-init-code > div.thebelab-cell > button.thebelab-run-button
+            let runButton = initDivs[i].firstElementChild.childNodes[1]
+            runButton.click();
+        }
+    }, 500)    
+}
\ No newline at end of file

src/styles/thebelab.css

+.thebelab-cell .thebelab-input pre {
+    z-index: 0;
+}
+
+.thebelab-code, .thebelab-init-code {
+    display: none;
+}
+
+.thebelab-cell + p > button.thebelab-activate-button {
+    display: none;
+}
+
+.thebelab-restart-button {
+    display: none;
+}
+
+.thebelab-button {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    border: none;
+    border-radius: .1rem;
+    padding: 0 2rem;
+    margin: .5rem .1rem;
+    min-width: 64px;
+    height: 1.6rem;
+    vertical-align: middle;
+    text-align: center;
+    font-size: 0.8rem;
+    color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.07);
+    overflow: hidden;
+    outline: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.thebelab-button:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+}
+
+.thebelab-button:active {
+    background-color: rgba(0, 0, 0, 0.15);
+    color: rgba(0, 0, 0, 1)
+}
+
+.thebelab-activate-button {
+    margin-top: -1rem;
+    float: right;
+}

theme/main.html

@@ -17,3 +17,25 @@
 </script>
 <!-- End Piwik Code -->
 {% endblock %}
+
+{% block scripts %}
+<!-- ThebeLab config -->
+<!-- IMPORTANT: Everytime a python file is changed, ref needs to be updated to the latest commit! -->
+<script type="text/x-thebe-config">
+  {
+    predefinedOutput: true,
+    binderOptions: {
+      repoProvider: "git",
+      repo: "https://gitlab.kwant-project.org/solidstate/lectures",
+      ref: "e6c970126f4e819e4a3eb717a86ba9fb523d20bf",
+    },
+    requestKernel: true,
+    kernelOptions: {
+      name: "python3",
+      path: "src"
+    },
+  }
+</script>
+<!-- End ThebeLab config -->
+{{ super() }}
+{% endblock %}