Using IPython nbtoc extension.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The IPython `nbtoc` extension uses a (relatively) small piece of javascript to implement a poppable table of contents view of the notebook\n",
      "structure. To use it, do the following steps using IPython magic commands:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%install_ext https://raw.github.com/minrk/ipython_extensions/master/nbtoc.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "Installed nbtoc.py. To use it, type:\n",
        "  %load_ext nbtoc\n"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load_ext nbtoc"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Now running the `%nbtoc` IPython magic pops up the table of contents. This maps *only* the heading cells in the notebook, *not* \n",
      "\"headings\" inside Markdown cells notated with `###` etc. The table of contents currently does *not* update automatically; `%nbtoc` must be \n",
      "rerun to upate the contents list."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%nbtoc"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<!-- extracted from https://gist.github.com/magican/5574556 -->\n",
        "<div id=\"toc-wrapper\">\n",
        "    <div class=\"header\">Contents <a href=\"#\" class=\"hide-btn\">[hide]</a></div>\n",
        "    <div id=\"toc\"></div>\n",
        "</div>\n",
        " \n",
        "<style>\n",
        "  #toc {\n",
        "    overflow-y: scroll;\n",
        "    max-height: 300px;\n",
        "  }\n",
        "  #toc-wrapper {\n",
        "    position: fixed; top: 113px; max-width:430px; right: 28px;\n",
        "    border: thin solid rgba(0, 0, 0, 0.38); opacity: .8;\n",
        "    border-radius: 5px; background-color: #fff; padding:10px;\n",
        "    z-index: 100;\n",
        "  }\n",
        "  #toc-wrapper.closed {\n",
        "      min-width: 100px;\n",
        "      width: auto;\n",
        "      transition: width;\n",
        "  }\n",
        "  #toc-wrapper:hover{\n",
        "      opacity:1;\n",
        "  }\n",
        "  #toc-wrapper .header {\n",
        "      font-size:18px; font-weight: bold;\n",
        "  }\n",
        "  #toc-wrapper .hide-btn {\n",
        "      font-size: 14px;\n",
        "  }\n",
        " \n",
        "</style>\n",
        "\n",
        "<style>\n",
        "  ol.nested {\n",
        "    counter-reset: item;\n",
        "    list-style: none;\n",
        "  }\n",
        "  li.nested {\n",
        "        display: block;\n",
        "    }\n",
        "  li.nested:before {\n",
        "        counter-increment: item;\n",
        "        content: counters(item, \".\")\" \";\n",
        "    }\n",
        "</style>\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "// adapted from https://gist.github.com/magican/5574556\n",
        "\n",
        "function clone_anchor(h) {\n",
        "  // clone link\n",
        "  var a = $(h).find('a').clone();\n",
        "  a.attr('href', '#' + a.attr('id'));\n",
        "  a.attr('id', '');\n",
        "  return a;\n",
        "}\n",
        "\n",
        "function ol_depth(element) {\n",
        "  // get depth of nested ol\n",
        "  var d = 0;\n",
        "  while (element.prop(\"tagName\").toLowerCase() == 'ol') {\n",
        "    d += 1;\n",
        "    element = element.parent();\n",
        "  }\n",
        "  return d;\n",
        "}\n",
        "\n",
        "function table_of_contents(threshold) {\n",
        "  if (threshold === undefined) {\n",
        "    threshold = 4;\n",
        "  }\n",
        "  var cells = IPython.notebook.get_cells();\n",
        "  \n",
        "  var ol = $(\"<ol/>\").addClass(\"nested\");\n",
        "  $(\"#toc\").empty().append(ol);\n",
        "  \n",
        "  for (var i=0; i < cells.length; i++) {\n",
        "    var cell = cells[i];\n",
        "    \n",
        "    if (cell.cell_type !== 'heading') continue;\n",
        "    \n",
        "    var level = cell.level;\n",
        "    if (level > threshold) continue;\n",
        "    \n",
        "    var depth = ol_depth(ol);\n",
        "\n",
        "    // walk down levels\n",
        "    for (; depth < level; depth++) {\n",
        "      var new_ol = $(\"<ol/>\").addClass(\"nested\");\n",
        "      ol.append(new_ol);\n",
        "      ol = new_ol;\n",
        "    }\n",
        "    // walk up levels\n",
        "    for (; depth > level; depth--) {\n",
        "      ol = ol.parent();\n",
        "    }\n",
        "    //\n",
        "    ol.append(\n",
        "      $(\"<li/>\").addClass(\"nested\").append(clone_anchor(cell.element))\n",
        "    );\n",
        "  }\n",
        "\n",
        "  $('#toc-wrapper .header').click(function(){\n",
        "    $('#toc').slideToggle();\n",
        "    $('#toc-wrapper').toggleClass('closed');\n",
        "    if ($('#toc-wrapper').hasClass('closed')){\n",
        "      $('#toc-wrapper .hide-btn').text('[show]');\n",
        "    } else {\n",
        "      $('#toc-wrapper .hide-btn').text('[hide]');\n",
        "    }\n",
        "    return false;\n",
        "  })\n",
        "\n",
        "  $(window).resize(function(){\n",
        "    $('#toc').css({maxHeight: $(window).height() - 200})\n",
        "  })\n",
        "\n",
        "  $(window).trigger('resize')\n",
        "}\n",
        "\n",
        "table_of_contents();\n",
        "\n",
        "\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Example section"
     ]
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Another section"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "A subsection"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "A level 3 heading"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Another subsection"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}