Customizing python cells' indentation

516 views
Skip to first unread message

Ugo Di Girolamo

unread,
Sep 15, 2015, 1:17:53 PM9/15/15
to Project Jupyter
Hi, I'm trying to customize my notebooks' python cells indent size to 2 spaces.
This is on a jupyter install where I am not an admin user, I just have access to my own unix home dir.

In a single user, ipython setup, I used to do that by adding some code in custom.js in my profile dir.
I'm a bit lost with respect to what are the directories that jupyter actually searches, and I was not able to get custom.js to be loaded.

Then I've tried to start from the instructions at https://carreau.gitbooks.io/jupyter-book/content/Jsextensions.html, and succeded at creating a simple extension:

define(function(){
  return {
    load_ipython_extension: function(){
      console.log('Loading ugos custom.js');
      require(["notebook/js/codecell"], function(result) {
        result.CodeCell.options_default.cm_config.indentUnit = 2;
        console.log('Loaded ugos custom.js');
      });
    }
  };
});

If I explicitly run a cell:
%%javascript
require(['base/js/utils'], function(utils) { utils.load_extensions('ugo'); });
in my notebook, then new cells do have 2 spaces indents.

But now I don't know how to get ipython to load the extension automatically, so that all the cells do get the same indentUnit.

Can you help me with this?

Thank you!

Ugo

Matthias Bussonnier

unread,
Sep 15, 2015, 2:27:05 PM9/15/15
to jup...@googlegroups.com
Hello Hugo, 


On Sep 15, 2015, at 10:17, Ugo Di Girolamo <u...@compass.com> wrote:

Hi, I'm trying to customize my notebooks' python cells indent size to 2 spaces.
This is on a jupyter install where I am not an admin user, I just have access to my own unix home dir.

In a single user, ipython setup, I used to do that by adding some code in custom.js in my profile dir.

In recent version you shouldn’t even need to do all that. 
Just issue the following once in the javascript console of your browser:

Jupyter.notebook.get_selected_cell().config.update({CodeCell:{cm_config:{indentUnit :2}}})


Reload your notebook. 

it works. 

I'm a bit lost with respect to what are the directories that jupyter actually searches, and I was not able to get custom.js to be loaded.

Then I've tried to start from the instructions at https://carreau.gitbooks.io/jupyter-book/content/Jsextensions.html, and succeded at creating a simple extension:

define(function(){
  return {
    load_ipython_extension: function(){
      console.log('Loading ugos custom.js');
      require(["notebook/js/codecell"], function(result) {
        result.CodeCell.options_default.cm_config.indentUnit = 2;
        console.log('Loaded ugos custom.js');
      });
    }
  };
});

If I explicitly run a cell:
%%javascript
require(['base/js/utils'], function(utils) { utils.load_extensions('ugo'); });
in my notebook, then new cells do have 2 spaces indents.

But now I don't know how to get ipython to load the extension automatically, so that all the cells do get the same indentUnit.

You need to issue the 

 > Jupyter.notebook.config.update({"load_extensions":{"my_ext":true}})

That will load your extension every tim, I think is that part you miss. 

Can you help me with this?

If the book is not clear, PR welcome. It would be nice to have someone send docs to Jupyter notebook doc itself.
-- 
M


Thank you!

Ugo


--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/9ac80a8a-b88c-4cf2-a00f-7b8c683e0d39%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ugo Di Girolamo

unread,
Sep 15, 2015, 3:19:27 PM9/15/15
to Project Jupyter
Hey Matthias,

this did work for me! Thank you.

I'd love to send you a PR to document this, but I feel I still am quite confused (and frankly a newbie).

This is the first time that I see the "Jupyter" variable in the javascript console.
I was trying to achieve something similar by accessing the "IPython" variable there (it is also available).

Thank you again!

Ugo

Matthias Bussonnier

unread,
Sep 15, 2015, 4:17:41 PM9/15/15
to jup...@googlegroups.com

> On Sep 15, 2015, at 12:19, Ugo Di Girolamo <u...@compass.com> wrote:
>
> Hey Matthias,
>
> this did work for me! Thank you.
>
> I'd love to send you a PR to document this, but I feel I still am quite confused (and frankly a newbie).

No problem, just writing what you though you understood is helpful too, at least to know what we
are not clear with.

> This is the first time that I see the "Jupyter" variable in the javascript console.
> I was trying to achieve something similar by accessing the "IPython" variable there (it is also available).

They are the same variable, no worries.
The IPython one may disappear. Just to make the distinction what is IPython/what is Jupyter clearer.
--
M

Carol Willing

unread,
Sep 26, 2015, 12:00:53 PM9/26/15
to Project Jupyter
For future readers of this thread, the Jupyter Notebook documentation now includes information on configuring the front end (including the example referenced in this thread) at https://jupyter-notebook.readthedocs.org/en/latest/frontend_config.html

Tom Pace

unread,
Sep 29, 2015, 9:49:34 AM9/29/15
to Project Jupyter


I have been attempting to do exactly this. I've entered the JavaScript as shown here, but I get "ReferenceError: Jupyter is not defined". I tried replacing Jupyter with IPython just in case it was a version issue, but that did the same thing. Is there some step I'm missing that defines this reference?

Thanks,
Tom

diagona...@gmail.com

unread,
Sep 13, 2016, 9:16:52 PM9/13/16
to Project Jupyter
To the possible assistance of complete Javascript noobs such as myself, who are also using Chrome:

I ran into the same issue as Tom, and after squinting a bit harder at my javascript console I noticed that there was a dropdown box near the top (next to "preserve log") which was set to "chrome-extension://oi...ldignal".  After changing it to "top", the Jupyter object became accessible.

It seems extensions in Chrome each run in their own sandboxed javascript session, and sometimes (or in my case, every time!) the console defaults to one of those sessions.
Reply all
Reply to author
Forward
0 new messages