View on GitHub

how-to-customize-title-of-jupyter-notebook

:tada: How to customize the web page title of all pages created with Jupyter Notebook :notebook:

“How to customize Jupyter notebooks document titles ?”

New tutorial :sparkles:

By using the latest features from Jupyter Notebook, you can use this script custom.js to perform this hack easily:

// custom.js script for Jupyter Notebook
// (C) Lilian Besson, 2018
// See https://github.com/Naereen/how-to-customize-title-of-jupyter-notebook/issues/1
// MIT License, https://lbesson.mit-license.org/

// Fourth solution, using deprecated __defineSetter__ method... simple and pretty!
document.__defineSetter__('title', function(val) {
    // document.title = val + " — Jupyter Notebook";   // WARNING Would be recursive!
    console.log("Setting window's title to:", val);
    document.querySelector('title').childNodes[0].nodeValue = val + " — Jupyter Notebook";
});

You can download this raw custom.js file and save it to ~/.jupyter/custom/custom.js (create the folder if needed):

mkdir -p ~/.jupyter/custom/
cd ~/.jupyter/custom/
wget https://github.com/Naereen/how-to-customize-title-of-jupyter-notebook/raw/master/custom.js
cat custom.js  # just check the content by yourself, never trust a stranger from Internet!
# relaunch Jupyter notebook!

See the difference (before, without “Jupyter Notebook” display in the window’s title

after, with “Jupyter Notebook” in the title):

Previous tutorial

This small document is here to quickly and clearly explain how to do the following tweak for every page that the Jupyter application displays in your browser :

« How to ensure that the title of the web page (document.title in the DOM) finishes with " - Jupyter Notebook" ? »

These explanations were up-to date on May 12th of 2017, with Jupyter Notebook package at version 5.0.0.

The following explanations assume you have a local installation of Jupyter Notebook. If this is not the case, follow this tutorial.

Typically, this Python package will be installed in /usr/local/lib/python3.5/dist-packages/notebook/ on a Debian/Ubuntu machine, and probably on a similar location for Mac OS X, and you can figure it out on Windows. Let call that path PATH/.

First modification : HTML templates

Go in PATH/templates/
Edit, probably with sudo rights, the following templates:
- view.html on line #6, add “- File View” after `` and before </title>.
- tree.html on line #3, add “- File Tree” after `` and before { % endblock % }.
- terminal.html on line #3, add “- Terminal” after `` and before { % endblock % }.
- edit.html on line #3, add “- Editor” after `` and before { % endblock % }.
- page.html on line #7, add “ - Jupyter Notebook” after { % endblock % } and before </title>.
Be sure to save all the changes, and that’s it for this step.

Of course, if the line number don’t match, just search for the pattern, and edit on the first line that contains it !

Second modification : Javascript files

Go in PATH/notebook/static/notebook/js/
Edit, probably with sudo rights, the following scripts:
- main.min.js (and maybe main.js) : on line #32216 (or nearby!), add “ + ' - Jupyter Notebook'” after “document.title = nbname“… :warning: that file is HUGE, so try to use a solid text editor to edit it! (for instance, GNU nano)
- savewidgets.js : on line #139, add “ + ' - Jupyter Notebook'” after “document.title = nbname”

Cautious!

These changes have to be done again if you update (pip install --upgrade) Jupyter Notebook…

Demos ?

Here are some screenshots showing that these small modifications worked:

Editing a notebook : before and after

Home view : before and after

You can also see the useless PDF version of this webpage… If you want!

Questions

Bonus question : why would you want to do that ?

Simple and honest answer : I am constantly using my uLogMe software to watch and monitor the title of the active window on my laptops, and I wanted to store the time spent editing Jupyter notebooks under a special category (“Notebooks”) and not under the general browsing time.
Fun answer : … I am always curious about how a certain piece of software works, and I love tweaking “just a little bit” open-source pieces of code!

Interesting question : why writing a tutorial and not a Jupyter Notebook extension (`nbextension`) ?

Simple answer : I think (or though) it would be hard, as the changes explained below concern just a line or two in a few files, but on the core files of the software…
Boring answer : I don’t have time to produce a well-done nb extension, and maintain it…