A minimal example
Contents
A minimal example#
This page illustrates a minimal setup to get Thebe running, using mybinder as a kernel (i.e. computation backend) provider. This guide will go step-by-step in loading Thebe and activating it so that your code cells become active.
Loading and configuring Thebe#
In order to use Thebe, we must first set its configuration. This must be done before Thebe is loaded from a CDN or a local script.
Here’s a sample configuration for Thebe
<!-- Configure and load Thebe !-->
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
repo: "binder-examples/requirements",
},
}
</script>
In this case, requestKernel: true
asks Thebe to request a kernel
immediately upon being loaded, and binderOptions
provides the repository
that Binder will use to give us a Kernel.
Next, we’ll load Thebe from a CDN:
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
Adding code cells#
Finally, we’ll add code cells that Thebe can activate. By default, Thebe
will look for any HTML elements with data-executable="true"
. We’ll also add
a data-language="python"
attribute to enable syntax highlighting with CodeMirror.
print("Hello!")
Here’s the code that created the cell above:
<pre data-executable="true" data-language="python">print("Hello!")</pre>
Press the Thebe button above to activate this cell, then press the “Run” button, or “Shift-Enter” to execute this cell.
Note
When Thebe is activated in this example, it must first ask Binder for a kernel. This may take several seconds.
Now let’s try another cell that generates a Matplotlib plot. Because we’ve configured Thebe to use Binder with an environment that has Numpy and Matplotlib, this works as expected. Try modifying the cell contents and re-running!
This is another cell, with plotting. Shift-Enter again!
%matplotlib inline import numpy as np import matplotlib.pyplot as plt x = np.linspace(0,10) plt.plot(x, np.sin(x)) plt.plot(x, np.cos(x))
Here’s the HTML for the cell above:
<pre data-executable="true" data-language="python">
%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0,10)
plt.plot(x, np.sin(x))
plt.plot(x, np.cos(x))
</pre>
And here’s an example where the contents cannot be modified once instantiated:
print("My contents cannot be changed!")
For more examples, check out Examples.