A simple minimap for your nbconverted ipynb

  |   Source   |   Minimap

Some days ago, I presented a way to mimic the execution of nbconverted IPython notebooks (ipynb). Today, I will show you how to add a simple minimap to these static html documents.

But, what is a minimap? Do you know SublimeText or Ninja-IDE? They are IDEs with a thin column to the right (of the main window) which provides an overview of the code we are working on... OK, you don't have an idea what am I talking about? Just go ahead and you will see...

Addendum note: There are some performance issues with Firefox, but in Chromium it is working OK! Simplicity comes with some hidden costs ;-)

NOTE: if you are impatient, just go the beginning of this post and press the Minimap link next to the Source link... and surprise!

Well, my first thought to develop this feature was to look if anybody had this same idea (a minimap for html-based documents) before, and obviously, there was somebody ;-)

Mr. Google pointed me to a blog where I found a nice js-based (working) solution.

The implementation was very simple and we used the same strategy from the last blog posts: pass a template in the IPython.nbconvert call from the command line (but please, do not forget that you can also use a config file to pass the template name -and other things - to the IPython.nbconvert infrastructure).

OK, but we needed to write the template before passing it, so we did it:

In [1]:
!cat /media/datos/Ejemplos/minimap.tpl
  Click me to hide the output 
{%- extends 'html_full.tpl' -%}

{%- block header -%}
{{ super() }}

<script src="http://dropthebit.com/demos/mini_page_nav/miniPageNav.js"></script>

<style type="text/css">
body{
position: static;
}
</style>

{%- endblock header -%}

We extended the html_full template adding two things to the block header:

  • the url of the script which makes all of this happens
  • a simple css overwrite over body.position attribute to prevent the malfunction of the script.

And as a the final step, we just wrote:

ipython nbconvert 3_NumPy.ipynb --to html --template minimap.tpl --post serve

in our console, and we saw something like THIS

Do not forget!: There are some performance issues with Firefox, but in Chromium it is working OK! Simplicity comes with some hidden costs ;-)

Nice, don't you think?

We also did the same (with minor modifications) with our Nikola Zen theme (probably you had already tested it because I assume you are impatient!).

Now, with this simple feature, you not only can quickly get an idea of the length of your documents (blog post, article, lecture, whatever...) but also they are easier to scroll and navigate!

NOTE: If you are thinking "I want this minimap with in my IPython notebooks", you will have to hack the source code of the js library I used because it was designed for simple windows and not for more complex structures such as the notebook itself.

Enjoy your minimaps!

Damián.

Did you like the content? Great!

Or visit my support page for more information.


Btw, don't forget this blog post is an ipynb file itself! So, you can download it from the "Source" link at the top of the post if you want to play with it ;-)

Comments powered by Disqus