Adding custom controls in the notebook toolbar

The CSS and JavaScript of the HTML notebook can be customized through the files in ~/.ipython/profile_default/static/custom, where ~ is your home directory, and default is your IPython profile.

In this recipe, we will use these customization options to add a new button in the notebook toolbar that linearly renumbers all code cells.

How to do it...

1. First, we are going to inject JavaScript code directly in the notebook. This is useful for testing purposes, or if we don't want the changes to be permanent. The JavaScript code will be loaded with that notebook only. To do this, we can just use the %%javascript cell magic as follows:

   In [1]: %%javascript
           // This function allows us to add buttons 
           // to the notebook toolbar.
           IPython.toolbar.add_buttons_group([
           {
               // The button's label.
               'label': 'renumber all code cells',
               
               // The button's icon...