CODEWITHSUNDEEP
pythonuser-interfacejupyter-notebookipythonjupyterhub
user3713466
user3713466

Reputation: 393

Customize jupyter notebook design (not just styling)

Is it possible to customize jupyter notebook front end part (not just css)? Basically I want to serve my custom html page which has code block for which I want the functionality of a cell as in Jupyter notebook. I can customize the styling of the page but didn't find any way to change the layout (html).

Upvotes: 2

Views: 1915

Answers (1)

Louise Davies
Louise Davies

Reputation: 15981

You can use the custom.js file (found in the same place as the custom.css file you have likely been editing) to load arbitrary Javascript on page load. You can use this to modify the DOM, for example using JQuery. Or, if you intend on more complicated work or distributing your javascript it would probably be best to make an extension (http://jupyter-notebook.readthedocs.io/en/latest/extending/frontend_extensions.html)

If I knew specifically what you were trying to do I could try and help give an example, but here is the basic framework on how to write a custom.js file:

define([
    'base/js/namespace',
    'base/js/events'
], function(Jupyter, events) {
    events.on('app_initialized.NotebookApp', function(){
        //your custom code here
    });
});

Upvotes: 2

Related Questions