Jupyter Notebook custom js

To inject JavaScript we provide an entry point: custom.js that allows the user to execute and load other resources into the notebook. JavaScript code in custom.js will be executed when the notebook app starts and can then be used to customize almost anything in the UI and in the behavior of the notebook.

custom.js can be found in the ~/.jupyter/custom/custom.js. You can share your custom.js with others.

from jupyter_core.paths import jupyter_config_dir

jupyter_dir = jupyter_config_dir()

jupyter_dir

import os.path

custom_js_path = os.path.join(jupyter_dir, 'custom', 'custom.js')

if os.path.isfile(custom_js_path):

    with open(custom_js_path) as f:

        print(f.read())

else:

    print("You don't have a custom.js file")

Note that custom.js is meant to be modified by user. When writing a script, you can define it in a separate file and add a line of configuration into custom.js that will fetch and execute the file.

Warning : even if modification of custom.js takes effect immediately after browser refresh (except if browser cache is aggressive), creating a file in static/ directory needs a server restart.

Create a custom.js in the right location with the following content:

alert("hello world from custom.js")

Restart your server and open any notebook.

Be greeted by custom.js

Once the custom.js is placed inside the custom folder, it was working well with jupyter notebook. But was not still quite with the Jupyter lab book. 

References:

https://jupyter-notebook.readthedocs.io/en/latest/examples/Notebook/JavaScript%20Notebook%20Extensions.html#custom.js