Posting IPython Notebook in WordPress

3 Views

I am trying to convert my IPython notebook to an html file so that I can put it on my wordpress blog. I have used the following command to generate an html file for the notebook 

ipython nbconvert notebook.ipynb

then I copied the html code and pasted it into the ‘text’ tab. The resulting blog post sort of looks like the ipython notebook, however the problem is that the markdown equations do not show up and the headings look strange. Has anyone managed to display an IPython notebook in a wordpress blog post successfully? If so, how?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. In this November 2013 blog article http://www.josephhardinee.com/blog/?p=46, the author goes quickly through the conversion process.

    He mentions the need to install the Simple Mathjax plugin to make equation display work.

    Now, what I have tested to work on my self-hosted WordPress blog:

    1. Copy paste the html output of nbconvert (only what is inside the <body> tag) in the “Text” tab.
    2. disable the Worpress html code parsing because otherwise images do not display (as explained in the blog post). See below for two possible methods.
    3. Activate Mathjax: either with a plugin or manually in the post code

    Mathjax With plugin

    I have not tested the Simple Mathjax plugin, but I have LaTeX for WordPress which works for me.

    Manual Mathjax activation

    Copy paste from nbconvert output the two <script> tags that activate Mathjax:

    1) Load the library:

    <script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

    2) Launch it:

    <script type="text/javascript">
init_mathjax = function() {
    if (window.MathJax) {
        // MathJax loaded
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [ ['$','$'], ["\(","\)"] ],
                displayMath: [ ['$$','$$'], ["\[","\]"] ]
            },
            displayAlign: 'left', // Change this to 'center' to center equations.
            "HTML-CSS": {
                styles: {'.MathJax_Display': {"margin": 0}}
            }
        });
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    }
}
init_mathjax();
</script>

    Disabling code HTML parsing

    The blog post suggests to activating the PS Disable Auto Formatting plugin to make the notebook images work. I have tested it successfully but it has one drawback: it messes up with the rendering of all the other posts… that’s quite an issue!

    I have tested instead the Raw HTML plugin which enable a per-post tuning. I’ve made images work by selecting the Disable automatic paragraphs option (the plugin creates a new box in the post editor).

    Remaining issues:

    while the notebooks should display fine with this method, there is still work to get the syntax highlighting of code cells to display properly. However the Python source code is already parsed by CodeMirror, so it should just be about loading the appropriate CSS code.

  2. One approach is to embed the notebook using an iframe. This original idea came from the blog post http://onsnetwork.org/eimd/2014/08/08/how-to-enter-ipython-notebooks-to-wordpress/, but I’ve made several improvements. The straightforward way to do this is to:

    1. Install the Raw HTML plugin to WordPress. This only needs to be done once.
    2. Convert the notebook to HTML ipython nbconvert YOUR_NOTEBOOK.ipynb
    3. Upload the resulting HTML to WordPress as a media file. Take note of the URL where it is uploaded to.

    4. Insert the iframe between raw tags in your post. For example:

      [raw]
<iframe id="ipython_notebook_frame" 
        style="height: 500px; width: 100%; padding: 0; border: none;" 
        src="URL_OF_NOTEBOOK">
 </iframe>
[/raw]

    Unfortunately, this straightforward approach doesn’t work very well since the height is never right and one tends to get annoying horizontal scroll bars. However, since the uploaded html is hosted on the same domain as the blog post, this can be fixed using some javascript. The following recipe seems to work reasonably well for getting the width and height right, resulting in a clean blog post:

        [raw]

    <script type="text/javascript">
    function resizeIframe(ifrm) {       
        ifrm.style.height = ifrm.contentWindow.document.body.scrollHeight + 'px';
        // Setting the width here, or setting overflowX to "hidden"both 
        // seem to work. It may be that one turns out to be better; for
        // now I set the height.
        ifrm.style.width = ifrm.contentWindow.document.body.scrollWidth + 'px';
    }
    </script>

    <script type="text/javascript">
    function onLoad() {    
        var ifrm = document.getElementById('ipython_notebook_frame');   
        setTimeout(resizeIframe, 0, ifrm);
    }
    </script>

    <iframe id="ipython_notebook_frame" 
            style="height: 500px; width: 100%; padding: 0; border: none;" 
            src="URL_OF_NOTEBOOK">
     </iframe>

    <script type="text/javascript">
    // By deleting and reinstating the iframe src, and by using setTimeout
    // rather than resizing directly we convince Safari to render the
    // page. I've lost the link for where I found this trick, so 
    // can't properly credit it.
    var iframe = document.getElementById('ipython_notebook_frame');
    iframe.onload = onLoad;
    var iSrc = iframe.src;
    iframe.src = '';
    iframe.src = iSrc;
    </script>

    [/raw]

    For a little more detail on this, as well as an example you can take a look at this post: http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress