ipython notebook toolbar customize

问题:

I want to add a new toolbar button on ipython notebook. I got a good link mentioned this.

So I create a new file: ~/.ipython/profile_default/static/custom/custom.js with below content

    $([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
        {
             'label'   : 'run qtconsole',
             'icon'    : 'ui-icon-calculator', // select your icon from http://jqueryui.com/themeroller/
             'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}
        }
        // add more button here if needed.
        ]);
    });

The restart ipython notebook and load the ipython document. I can see one button at the right of the toolbar.

This issue is the icon seems not displayed correctly.

But I guess it should looks like ui-icon-calculator.

The ui-icon-calculator can be found at themeroller but I am not sure if I need to download it to local disk.

回答1:

That doc is out of date. jquery-ui icons are no longer available, instead use one from FontAwesome with IPython >= 1.0. See this file for an example custom.js with IPython 1.x.

回答2:

If you want to:

1. Display Menu only when open a ipython notebook.
2. Add a Menu to hide/unhide input cells.
3. Disable the in/out prompt each cell.

you can following below steps:

1. Change custom.css to disable the in/out cell prompt

    ~/.ipython/profile_default/static/custom/custom.css

   Add below content:

   .prompt{
       display: None;
   }
   

2. Change custom.js to disable toolbar & header line by default.

    ~/.ipython/profile_default/static/custom/custom.js

   Content as below:

   code_show=true;
   function code_toggle() {
    if (code_show){
        $('div.input').hide();
    } else {
        $('div.input').show();
    }
    code_show = !code_show
   }
   $([IPython.events]).on('app_initialized.NotebookApp', function(){
       $("#view_menu").append("<li id=\"toggle_input\" title=\"Show/Hide Inputs\"><a href=\"javascript:code_toggle()\">Toggle Inputs</a></li>")
       $('div#header').show()
       $('div#maintoolbar').hide()
       $('div#ipython_notebook').hide()
       $('span#save_widget').hide()
       $('span#kernel_logo_widget').hide()
   });
   

3. Restart your notebook server to take effect.