Geek Answers Handbook

Post IPython Notebook in Wordpress

I am trying to convert my IPython notepad into an html file so that I can put it in my wordpress blog. I used the following command to create an html file for a laptop

ipython nbconvert notebook.ipynb

then I copied the html code and pasted it into the "text" tab. The resulting blog post looks like an ipython laptop, however the problem is that the markdown equations are not displayed and the headings look weird. Has anyone managed to display an IPython laptop in a Wordpress blog post successfully? If so, how?

+7
wordpress blogs ipython-notebook
source share
2 answers

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

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

Now, what I tested to work on my own Wordpress blog:

  • Copy the html tab of the nbconvert output (only what is inside the <body> ) on the "Text" tab.
  • disable parsing of Worpress code, because otherwise the images will not be displayed (as explained in the blog post). The following are two possible methods.
  • Activate Mathjax: either with the plugin or manually in the zip code

Mathjax With Plugin

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

Manual Activation Mathjax

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

1) Download the library:

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

2) Run 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 HTML Analysis Code

The blog offers to activate the plugin Disable automatic formatting to do the work with a laptop. I tested it successfully, but it has one drawback: it gets confused with providing all other messages ... this is quite a problem!

Instead of Raw HTML , I tested a plugin that allows you to customize each entry. I did work with images by selecting the Disable automatic paragraphs option (the plugin creates a new field in the message editor).

The remaining problems:

while laptops should display this method well, there is still work to ensure that the syntax highlighting of the code cells is displayed correctly. However, the Python source code is already parsed using CodeMirror, so it should just load the appropriate CSS code.

+5
source share

One approach is to embed a laptop using an iframe. This original idea is taken from the blog post http://onsnetwork.org/eimd/2014/08/08/how-to-enter-ipython-notebooks-to-wordpress/ , but I made some improvements. The direct way to do this is:

  • Install the Raw HTML plugin in Wordpress. This needs to be done only once.
  • Convert laptop to HTML ipython nbconvert YOUR_NOTEBOOK.ipynb
  • Download the resulting HTML in Wordpress as a media file. Pay attention to the URL in which it is uploaded.

  • Insert an iframe between the 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 simple approach doesn’t work very well, since the height is never correct, and everyone tends to annoy horizontal scrollbars. However, since the downloaded html is hosted in the same domain as the blog post, this can be fixed with some javascript. The following recipe seems to work well enough to get the width and height on the right, which leads to 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 more information about this, as well as an example, you can see this post: http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress

+2
source share

More articles:


All Articles