How can I add a table of contents to a Jupyter JupyterLab notebook

Question

The documentation at http   ipython org ipython-doc stable interactive notebook html says     You can provide a conceptual structure for your computational document as a whole using different levels of headings  there are 6 levels available  from level 1  top level  down to level 6  paragraph   These can be used later for constructing tables of contents  etc    However  I can t find instructions anywhere on how to use my hierarchical headings to create such a table of contents  Is there a way to do this   NB  I d also be interested in other kinds of navigation using ipython notebook headings  if any exist  For instance  jumping back and forward from heading to heading in order to quickly find the start of each section  or hiding  folding  the contents of an entire section  This is my wish-list - but any kind of navigation at all would be of interest  Thanks

User · Answer

nbextensions ToC instructions

Introduction

As @Ian and @Sergey have mentioned, nbextensions is a simple solution. To elaborate their answer, here is a few more information.

What is nbextensions?

The nbextensions contains a collection of extensions that add functionality to your Jupyter notebook.

For example, just to cite a few extensions:

Table of Contents
Collapsible headings

Install nbextensions

The installation can be done through Conda or PIP

# If conda:
conda install -c conda-forge jupyter_contrib_nbextensions
# or with pip:
pip install jupyter_contrib_nbextensions

You will see the new tab Nbextensions in the jupyter notebook menu. Uncheck the checkbox at the top disable configuration for nbextensions without explicit compatibility (they may break your notebook environment, but can be useful to show for nbextension development) and then check Table of Contents(2). That is all. Screenshot:

Copy js and css files

To copy the nbextensions' javascript and css files into the jupyter server's search directory, do the following:

jupyter contrib nbextension install --user

Toggle extensions

Note that if you are not familiar with the terminal, it would be better to install nbextensions configurator (see the next section)

You can enable/disable the extensions of your choice. As the documentation mentions, the generic command is:

jupyter nbextension enable <nbextension require path>

Concretely, to enable the ToC (Table of Contents) extension, do:

jupyter nbextension enable toc2/main

Install Configuration interface (optional but useful)

As its documentation says, nbextensions_configurator provides config interfaces for nbextensions.

It looks like the following:

To install it if you use conda:

conda install -c conda-forge jupyter_nbextensions_configurator

If you don't have Conda or don't want to install through Conda, then do the following 2 steps:

pip install jupyter_nbextensions_configurator
jupyter nbextensions_configurator enable --user

User · Answer

I recently created a small extension to Jupyter named jupyter-navbar  It  searches for headers written in markdown cells  and displays links to them in the sidebar in a hierarchical fashion  The sidebar is resizable and collapsible  See screenshot below   It is easy to install  and takes advantage of the  custom  JS and CSS codes that get executed whenever a notebook is opened  so you don t need to manually run it

User · Answer

There is an ipython nbextension that constructs a table of contents for a notebook  It seems to only provide navigation  not section folding

User · Answer

There are now two packages that can be used to handle Jupyter extensions     jupyter contrib nbextensions that installs extensions  including table of contents  jupyter nbextensions configurator that provides graphical user interfaces for configuring which nbextensions are enabled  load automatically for every notebook  and provides controls to configure the nbextensions  options    UPDATE   Starting from recent versions of jupyter contrib nbextensions  at least with conda you don t need to install jupyter nbextensions configurator because it gets installed together with those extensions

User · Answer

You can add a TOC manually with Markdown and HTML  Here s how I have been adding   Create TOC at top of Jupyter Notebook      TOC     First Bullet Header   first-bullet     Second Bullet Header   second-bullet    Add html anchors throughout body      First Bullet Header  lt a class  anchor  id  first-bullet  gt  lt  a gt   code blocks        Second Bullet Header  lt a class  anchor  id  second-bullet  gt  lt  a gt   code blocks      It may not be the best approach  but it works  Hope this helps

User · Answer

Here is my approach  clunky as it is and available in github   Put in the very first notebook cell  the import cell   from IPythonTOC import IPythonTOC  toc   IPythonTOC     Somewhere after the import cell  put in the genTOCEntry cell but don t run it yet       if you called toc genTOCMarkdownCell before running this cell   the title has been set in the class      print toc genTOCEntry     Below the genTOCEntry cell   make a TOC cell as a markdown cell    lt a id  TOC  gt  lt  a gt    TOC   As the notebook is developed  put this genTOCMarkdownCell before starting a new section   with open  TOCMarkdownCell txt    w   as outfile       outfile write toc genTOCMarkdownCell  Introduction      cat TOCMarkdownCell txt   rm TOCMarkdownCell txt   Move the genTOCMarkdownCell down to the point in your notebook where you want to start a new section and make the argument to genTOCMarkdownCell the string title for your new section then run it  Add a markdown cell right after it and copy the output from genTOCMarkdownCell into the markdown cell that starts your new section  Then go to the genTOCEntry cell near the top of your notebook and run it  For example  if you make the argument to genTOCMarkdownCell as shown above and run it  you get this output to paste into the first markdown cell of your newly indexed section    lt a id  Introduction  gt  lt  a gt      Introduction   Then when you go to the top of your notebook and run genTocEntry  you get the output    Introduction   Introduction    Copy this link string and paste it into the TOC markdown cell as follows    lt a id  TOC  gt  lt  a gt    TOC   Introduction   Introduction    After you edit the TOC cell to insert the link string and then you press shift-enter  the link to your new section will appear in your notebook Table of Contents as a web link and clicking it will position the browser to your new section   One thing I often forget is that clicking a line in the TOC makes the browser jump to that cell but doesn t select it  Whatever cell was active when we clicked on the TOC link is still active  so a down or up arrow or shift-enter refers to still active cell  not the cell we got by clicking on the TOC link

User · Answer

JupyterLab ToC instructions There are already many good answers to this question  but they often require tweaks to work properly with notebooks in JupyterLab  I wrote this answer to detail the possible ways of including a ToC in a notebook while working in and exporting from JupyterLab  As a side panel The jupyterlab-toc extension adds the ToC as a side panel that can number headings  collapse sections  and be used for navigation  see gif below for a demo   This extension is included by default since JupyterLab 3 0  in older version you can install it with the following command jupyter labextension install  jupyterlab toc    In the notebook as a cell At the time being  this can either be done manually as in Matt Dancho s answer  or automatically via the toc2 jupyter notebook extension in the classic notebook interface  First  install toc2 as part of the jupyter contrib nbextensions bundle  conda install -c conda-forge jupyter contrib nbextensions  Then  launch JupyterLab  go to Help -- gt  Launch Classic Notebook  and open the notebook in which you want to add the ToC  Click the toc2 symbol in the toolbar to bring up the floating ToC window  see the gif below if you can t find it   click the gear icon and check the box for  quot Add notebook ToC cell quot   Save the notebook and the ToC cell will be there when you open it in JupyterLab  The inserted cell is a markdown cell with html in it  it will not update automatically  The default options of the toc2 can be configured in the  quot Nbextensions quot  tab in the classic notebook launch page  You can e g  choose to number headings and to anchor the ToC as a side bar  which I personally think looks cleaner     In an exported HTML file nbconvert can be used to export notebooks to HTML following rules of how to format the exported HTML  The toc2 extension mentioned above adds an export format called html toc  which can be used directly with nbconvert from the command line  after the toc2 extension has been installed   jupyter nbconvert file ipynb --to html toc   Append  --ExtractOutputPreprocessor enabled False    to get a single html file instead of a separate directory for images  Remember that shell commands can be added to notebook cells by prefacing them with an exclamation mark    so you can stick this line in the last cell of the notebook and always have an HTML file with a ToC generated when you hit  quot Run all cells quot   or whatever output you desire from nbconvert   This way  you could use jupyterlab-toc to navigate the notebook while you are working  and still get ToCs in the exported output without having to resort to using the classic notebook interface  for the purists among us   Note that configuring the default toc2 options as described above  will not change the format of nbconver --to html toc  You need to open the notebook in the classic notebook interface for the metadata to be written to the  ipynb file  nbconvert reads the metadata when exporting  Alternatively  you can add the metadata manually via the Notebook tools tab of the JupyterLab sidebar  e g  something like       quot toc quot              quot number sections quot   false           quot sideBar quot   true        If you prefer a GUI-driven approach  you should be able to open the classic notebook and click File -- gt  Save as HTML  with ToC   although note that this menu item was not available for me    The gifs above are linked from the respective documentation of the extensions

User · Answer

How about using a Browser plugin that gives you an overview of ANY html page  I have tried the following    HTML 5 Outliner for Chrome  Headings Map for Firefox   They both work pretty well for IPython Notebooks  I was reluctant to use the previous solutions as they seem a bit unstable and ended up using these extensions

User · Answer

Here is one more option without too much JS hassle  https   github com kmahelona ipython notebook goodies

User · Answer

As Ian already pointed out  there is a table-of-contents extension by minrk for the IPython Notebook  I had some trouble to make it work and made this IPython Notebook which semi-automatically generates the files for minrk s table of contents extension in Windows  It does not use the  curl -commands or links  but writes the   js and   css files directly into your IPython Notebook-profile-directory   There is a section in the notebook called  What you need to do  - follow it and have a nice floating table of contents       Here is an html version which already shows it   http   htmlpreview github io  https   github com ahambi 140824-TOC blob master A 20floating 20table 20of 20contents htm

[jupyter-notebook] How can I add a table of contents to a Jupyter / JupyterLab notebook?

nbextensions ToC instructions

Introduction

Install nbextensions

Copy js and css files

Toggle extensions

Install Configuration interface (optional but useful)

Examples related to jupyter-notebook

Examples related to jupyter

Examples related to jupyter-lab