diff --git a/docs/howto/cm_customize.rst b/docs/howto/cm_customize.rst new file mode 100644 index 00000000..43bccc47 --- /dev/null +++ b/docs/howto/cm_customize.rst @@ -0,0 +1,69 @@ +====================== +Customizing CodeMirror +====================== + +CodeMirror is the tool used to convert your code cells into editable cells. +It has a number of configuration options, such as theming and syntax highlighting. +You can edit all of these attributes in a cell with the following thebelab configuration: + +.. code:: html + + + + +You can use any of `the available CodeMirror configurations `_. +For example, the following configuration changes the CodeMirror theme: + +.. code:: html + + + + +The below code cell demonstrates this theme: + +.. raw:: html + + + + + +
+   %matplotlib inline
+   import numpy as np
+   import matplotlib.pyplot as plt
+   plt.ion()
+   fig, ax = plt.subplots()
+   ax.scatter(*np.random.randn(2, 100), c=np.random.randn(100))
+   ax.set(title="Wow, an interactive plot!")
+   
+ +.. raw:: html + + + + +The above code should be styled according to the +`CodeMirror abcdef theme `_. \ No newline at end of file diff --git a/docs/index.rst b/docs/index.rst index 64585c5d..d2612476 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -59,6 +59,7 @@ result (be patient, it will take a few moments for Binder to start the kernel). config_reference minimal_example howto/initialize_cells + howto/cm_customize How ThebeLab works