Emulating IPython Notebooks in WordPress: Part 2

Input and Output

This is my second post about setting my WordPress blog to emulate an IPython notebook interface. In this post, I’ll talk about duplicating the Input/Output box style in the IPython notebook. My first post discussed source code highlighters, child themes, Pandas DataFrames, Matplotlib Figures, and MathJax support.

Output Box

I wanted to have a nice box that wraps all of the output from any of the code presented in the examples. This was fairly easy to accomplish by wrapping output in a division with the class “pyout”, i.e. <div class=”pyout”>…</div>. Then, I updated my CSS file to include the following:

This makes a nice dotted border around all of the code output.

Output Text

Next, to precede all output boxes with the text “Output:” is a little trickier. I could have added this text to every “pyout” division, but that would have been tedious and error prone. Fortunately, jQuery has a wrap function that wraps a given element in another set of tags. In this way, I could wrap all of my “pyout” boxes with another division containing the “Output:” text.

First of all, I wrote a custom JS script that wraps the “pyout” division. In my child theme folder, I created a file called “wrapper.js” that included the following code:

All “pyout” boxes are now surrounded by another division classed as “pyoutwrap”. Modifying my theme’s CSS file as below makes the “Output:” text bold and slightly larger than the actual code output.

Making these changes has no immediate effect, though, because you need to register this JS script with WordPress for it to be activated. This is accomplished by adding a couple of lines to “functions.php”, which is shown below in its entirety.

Much of this code was covered in the section on child themes from my previous post; however, notice that a new function wp_enqueue_script incorporates my new JS file into my site. A couple of the arguments to this function are very important, so they will all be described here. The first argument is simply the name with which I would like to register this script with WordPress. The second argument is the file location, making sure this is the full path by prefixing get_stylesheet_directory_uri(). The array argument ensures that jQuery is loaded before this script, otherwise things won’t work correctly. The string is just a version number, which is unnecessary, so I just put in a placeholder of ‘1.0’. The final argument, true, is critical. It puts this script at the end of the HTML, just before the closing </body> tag. In this way, the function is executed after the entire page is loaded. Otherwise, the script is loaded into the HTML head and is executed before the body, including my “pyout” box, is loaded.

Input Text

I followed a very similar procedure to add “Input:” before all of my code samples. Again, I used jQuery’s wrap function on all “crayon-syntax” classes. Below is the additional function call in “wrapper.js” and some new styling in “style.css”, respectively. I also changed Crayon’s “Top Margin” to “0px”, which can be done through Crayon’s Settings page.

Although this method works just fine, it wraps every Crayon code instance with the “pyinwrap”. That means that even non-Python code blocks will be prefaced with “Input:”. For now, this is going to be the best solution until I can figure out how to add Python-specific wrappers.

In Action

Now that everything is set, all of my Python input and output has a similar appearance to an IPython notebook session. (Not perfect, but close enough.)

Hello World!