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

When Leverage Overshadows Regularization

Regularization is an effective way of preventing overfitting in a model. Highly influential points in a data set can create a large amount of variation in estimates despite its presence.

The Community of Garlicoin, the New Meme Cryptocurrency

Garlicoin is the hottest new meme cryptocurrency. I surveyed about 200 of its enthusiasts to get a good idea of what the community looked like and what they thought about the cryptocurrency.