How to use IPython Notebooks in Blog Posts

How to use IPython Notebooks in Blog Posts

By Max Candocia

|

November 08, 2017

If you want to share an IPython notebook on a site other than GitHub, you can use a handy command to convert it to HTML:

ipython nbconvert --to html example.ipynb --template basic

At this point, though, a change in style is needed. It doesn't have any of the color formatting and is not aligned the way you would expect it. Thankfully it has most of the class tags needed to properly alter it. I use ipynb.css as a stylesheet for this purpose:

blockquote{
padding-left:4px;
border-left:2px solid #505050;
}
div#notebook{
margin-top:50px;
margin-bottom:100px;
}
div.cell{
max-width:60em;
margin-left:auto;
margin-right:auto;

}
div.input_prompt, div.output_prompt{
margin-left:-11ex;
}
div.input, div.output_wrapper{
margin-top:1em;
margin-bottom:1em;
}
div.text_cell{
margin-top:-2px;
margin-bottom:-2px;
padding-top:2px;
padding-bottom:2px;
border-collapse:collapse;
border-top:none;
border-bottom:none;
}

/*hide anchor links that are generated for headers*/
.anchor-link{display:none;}

/*color styles*/

/*box around content*/
div.hl-ipython2{
background-color:#EEE;
padding:4px;
border-width:1px;
border-color:#BBB;
border-style:solid;
}
/*imports*/
span.kn{color:forestgreen;font-weight:bold;}
/*multi-line text*/
span.sd{color:DarkRed;}
/*"self" and boolean args*/
span.bp{color:blue;}
/*comment*/
span.c1{color:forestgreen;}
/*function names*/
span.k{color:#2A3;font-weight:bold;}
/*parentheses and brackets and commas*/
span.p{color:#111;}
/*regular string*/
span.s1{color:DarkRed;}
/*number*/
span.mi{color:#3A4;}
/*function name*/
span.nf{color:blue;}
/*decorator*/
span.nd{color:#A18;}
/*., *, +, =, +=, etc.*/
span.o{}
/*arguments*/
span.n{}

/*style for code from errors*/
span.ansi-red-fg{color:#C22;}
span.ansi-green-fg{color:#2C2;}
span.ansi-cyan-fg{color:cyan;}
span.ansi-blue-fg{color:blue;}
span.ansi-green-intense-fg{color:#2C2;}

/*also used in warnings*/
div.output_stderr{
background-color:#DBB;
}

Example iPython Notebook

Below is a simple example of an iPython notebook embedded in HTML. For another example, see one of my recent posts: Reinforcement Learning Demo with Keras.

In [1]:
from collections import Counter
import json
import warnings

def empty_counter_warning(func):
    def inner_func(*args):
        for arg in args:
            if isinstance(arg, Counter):
                if len(arg)==0:
                    warnings.warn('You are using an empty counter object...')
        return func(*args)
    return inner_func

class DotCounter(Counter):
    """
    class that allows counter objects to have elements accessed by dots
    rather than just brackets
    """
    __getattr__ = Counter.__getitem__
    __setattr__ = Counter.__setitem__
    __delattr__ = Counter.__delitem__
    
    @empty_counter_warning
    def __str__(self):
        return json.dumps(self, indent=4)
    
    
no_stuff = DotCounter()
stuff = DotCounter({'apple':2,
                    'orange':1})
In [2]:
print no_stuff
{}
/usr/local/lib/python2.7/dist-packages/ipykernel_launcher.py:10: UserWarning: You are using an empty counter object...
  # Remove the CWD from sys.path while we load stuff.
In [3]:
#just printing out a few things
print stuff.apple
stuff.orange += 1
print stuff.banana + 2
stuff.lemon+=1
print stuff
2
2
{
    "orange": 2, 
    "lemon": 1, 
    "apple": 2
}
In [4]:
#force an error
1 + 'a'
---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
<ipython-input-25-f794df300990> in <module>()
      1 #force an error
----> 2 1 + 'a'

TypeError: unsupported operand type(s) for +: 'int' and 'str'

External Code

Here is the code on GitHub in case you wanted to try using the same files: https://github.com/mcandocia/examples/tree/master/ipynb_format_example


Tags: 

Recommended Articles

Dealing with Zeros and Negative Values with a Log Scale

When plotting data, you may want to use a log-scale for most of your data, but zeros, near-zero values, and negative values make this impossible. With piecewise linear and logarithmic functions, however, this effect can still be achieved.

"Error Bars" on Tiled Heatmaps

Heatmaps are a useful way of plotting 2-dimensional data, such as cross-tabulations. Adding "error bars" can seem non-intuitive, but expressing them in your visualization is possible with a small trick.