IPython Custom js and css

readme.md

CSS is changed to Solarized Light in Sublime style. (Ajust the width and font-size to your favorate, mine is large)

Add some keyboard shortcut in js.

The directory is ~/.ipython/profile_default/static/custom/custom.js, change extension to .css for css. Remember to change the path according to your profile name.

custom.css

/*
Placeholder for custom user CSS

mainly to be overridden in profile/static/custom/custom.css

This will always be an empty file in IPython
*/
/* comment out this line to bring the toolbar back */
html, body {
  overflow-y: hidden
}

div#header {
  background-color: #fdf6e3;
}

div#site {
  margin:0;
  padding:0;
  border-width: 0;
}

div#maintoolbar, div#header-container{
    display: none !important;
}

div#notebook-container {
    padding-left: 5px;
    width: 1070px;
    background-color: #fdf6e3;
}

div.navbar-collapse {
    background-color: #fdf6e3;
}

div#notebook {
    border-top: none;
}

div.input {
    width: 135ex;
}

div.input_area {
  border: 2px ridge #93a1a1;
}

div.output_subarea {
  /*margin-left:40px;*/
    max-width: 123ex;
}

div.output_area pre {
  font-size: 15px;

  /*font-family: consolas;*/
  word-break:normal !important;
}

div.text_cell {
    width: 135ex;
}

div.text_cell_render {
    font-size: 16px;
    line-height: 145%;
}

.rendered_html pre, .rendered_html code {
  background-color: #E6E6E6;
}

.CodeMirror {
    font-size: 15px;
    font-family: monacob, monospace;
    line-height: 145%;
}

/* Style for syntax highlighting*/
.cm-s-ipython.CodeMirror {background: #fdf6e3; color: #073642;}
.cm-s-ipython div.CodeMirror-selected {background: #073642 !important;}
.cm-s-ipython .CodeMirror-gutters {background: #fdf6e3; border-right: 1px solid #93A1A1; padding-right:5px;}
.cm-s-ipython .CodeMirror-linenumber {color: #93A1A1;}
.cm-s-ipython .CodeMirror-cursor {border-left: 1px solid #657b83 !important;}
.CodeMirror pre {color: #586E75;}
.cm-s-ipython span.cm-comment {color: #93A1A1;}
.cm-s-ipython span.cm-atom {color: #6c71c4;}
.cm-s-ipython span.cm-number {color: #D33682;}
.cm-s-ipython span.cm-meta {color: #268bd2;}
.cm-s-ipython span.cm-property, .cm-s-ipython span.cm-attribute {color: #859900;}
.cm-s-ipython span.cm-keyword {color: #748B00;}
.cm-s-ipython span.cm-string {color: #2AA198;}
.cm-s-ipython span.cm-operator {color: #859900;}
.cm-s-ipython span.cm-builtin {color: #B58900;}

.cm-s-ipython span.cm-variable {color: #586E75;}
.cm-s-ipython span.cm-variable-2 {color: #268bd2;}
.cm-s-ipython span.cm-def {color: #268BD2;}
.cm-s-ipython span.cm-error {background: #dc322f; color: #ffffff;}
.cm-s-ipython span.cm-bracket {color: #586e75;}
.cm-s-ipython span.cm-tag {color: #dc322f;}
.cm-s-ipython span.cm-link {color: #6c71c4;}

.cm-s-ipython .CodeMirror-matchingbracket { text-decoration: underline; color: #073642 !important;}

custom.js

// leave at least 2 line with only a star on it below, or doc generation fails
/**
 *
 *
 * Placeholder for custom user javascript
 * mainly to be overridden in profile/static/custom/custom.js
 * This will always be an empty file in IPython
 *
 * User could add any javascript in the `profile/static/custom/custom.js` file
 * (and should create it if it does not exist).
 * It will be executed by the ipython notebook at load time.
 *
 * Same thing with `profile/static/custom/custom.css` to inject custom css into the notebook.
 *
 * Example :
 *
 * Create a custom button in toolbar that execute `%qtconsole` in kernel
 * and hence open a qtconsole attached to the same kernel as the current notebook
 *
 *    $([IPython.events]).on('app_initialized.NotebookApp', function(){
 *        IPython.toolbar.add_buttons_group([
 *            {
 *                 'label'   : 'run qtconsole',
 *                 'icon'    : 'icon-terminal', // select your icon from http://fortawesome.github.io/Font-Awesome/icons
 *                 'callback': function () {
 *                     IPython.notebook.kernel.execute('%qtconsole')
 *                 }
 *            }
 *            // add more button here if needed.
 *            ]);
 *    });
 *
 * Example :
 *
 *  Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );`
 *  to load custom script into the notebook.
 *
 *    // to load the metadata ui extension example.
 *    $.getScript('/static/notebook/js/celltoolbarpresets/example.js');
 *    // or
 *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
 *    $.getScript('/static/notebook/js/celltoolbarpresets/slideshow.js');
 *
 *
 * @module IPython
 * @namespace IPython
 * @class customjs
 * @static
 */


$([IPython.events]).on('app_initialized.NotebookApp', function() {
    // Add the shortcut

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-x', {
        help: 'Clear all output', // This text will show up on the
        handler: function(event) { //  help page (CTRL-M h or ESC h)
            IPython.notebook.clear_all_output(); // Function that gets invoked and
            return false; //  triggers a notebook command
        }
    });

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-r', {

        help: 'Run all above including this cell', // This text will show up on the
        handler: function(event) { //  help page (CTRL-M h or ESC h)
            IPython.notebook.execute_cells_above();
            IPython.notebook.select_next();
            IPython.notebook.execute_cell();
            return false; //  triggers a notebook command
        }
    });

    IPython.keyboard_manager.edit_shortcuts.add_shortcut('ctrl-r', {

        help: 'Run all above including this cell', // This text will show up on the
        handler: function(event) { //  help page (CTRL-M h or ESC h)
            IPython.notebook.execute_cells_above();
            IPython.notebook.select_next();
            IPython.notebook.execute_cell();
            return false; //  triggers a notebook command
        }
    });

    IPython.keyboard_manager.edit_shortcuts.add_shortcut('cmd-enter', {

        help: 'Run current cell', // This text will show up on the
        handler: function(event) { //  help page (CTRL-M h or ESC h)
            IPython.notebook.execute_cell();
            return false; //  triggers a notebook command
        }
    });

    IPython.keyboard_manager.command_shortcuts.add_shortcut('cmd-enter', {

        help: 'Run current cell', // This text will show up on the
        handler: function(event) { //  help page (CTRL-M h or ESC h)
            IPython.notebook.execute_cell();
            return false; //  triggers a notebook command
        }
    });
    // A small hint so we can see through firebug that our custom code executed
    console.log("Customtcut(s) loaded");
});

define([
        'base/js/namespace',
        'base/js/events'
    ],
    function(IPython, events) {
        events.on("app_initialized.NotebookApp",
            function() {
                IPython.Cell.options_default.cm_config.lineNumbers = true;
            }
        );
    }
);