# WordPress Blogging with Jupyter Notebook in Five Simple Steps

Jupyter Notebook is such a great tool for scientific programming and data analysis. I would like to be able to show some of my notebooks easily on this WordPress powered blog. After looking around the web and tweaking a little, I have figured out how to easily embed the contents of a notebook. In fact, this entire post was written in the notebook.

### 1. Writing the contents¶

First let’s try to use the notebook to do some analysis and plotting:

In [1]:
```import re
from pandas import Series
import matplotlib.pyplot as plt
%matplotlib inline
```

Here we have a protein sequence of HLA-A*01. We are going to clean it up a little and plot the frequcies of each unique amino acid residue in the sequence:

In [2]:
```HLA_A1 ='''MAVMAPRTLLLLLSGALALTQTWAGSHSMRYFFTSVSRPGRGEPRFIAVGYVDDTQFVRF
DSDAASQKMEPRAPWIEQEGPEYWDQETRNMKAHSQTDRANLGTLRGYYNQSEDGSHTIQ
RVYLEGRCVDGLRRYLENGKETLQRTDPPKTHMTHHPISDHEATLRCWALGFYPAEITLT
WQRDGEDQTQDTELVETRPAGDGTFQKWAAVVVPSGEEQRYTCHVQHEGLPKPLTLRWEL
SSQPTIPIVGIIAGLVLLGAVITGAVVAAVMWRRKSSDRKGGSYTQAASSDSAQGSDVSL
TACKV'''

#remove line breaks and spaces
HLA_A1 = re.sub('\s', '', HLA_A1)

#turn it into a pandas Series object
HLA_A1 = Series([x for x in HLA_A1])

#count the frequency of each unique amino acid residue
freq = HLA_A1.value_counts()/len(HLA_A1) * 100
```
In [9]:
```#plot the frequency data
plt.figure(figsize=(10, 2))
freq.plot(kind='bar', alpha=0.8, color='orange')
plt.xticks(rotation=None)
plt.title("Amino acid frequencies: HLA-A*01", fontsize=18)
plt.xlabel("AA residues", fontsize=14)
plt.ylabel('Percentage (%)', fontsize=14)
```
Out[9]:
`<matplotlib.text.Text at 0x81d0e87b8>`

After we finish the above analysis, save the notebook, and download it as an IPython Notebook (.ipynb). Don’t download it as an HTML file, unless you want to embed it as an iframe. Here this file is saved as notebook_blog.ipynb.

### 3. Convert and embed the notebook¶

Navigate to the directory where the notebook is saved. Run the nbconvert command below to convert the downloaded notebook into a simple HTML file.

jupyter nbconvert –to html –template basic notebook_blog.ipynb notebook_blog.html

The source text in the notebook_blog.html file can now be copied and paste straight into the WordPress post/page editor.

### 4. Update the WordPress style.css file¶

The following css allows you to mimic the typical look of a jupyter notebook. From the WordPress Dashboard, navigate to Appearance -> Editor then paste the following code to the end of the styel.css file.

### 5. That’s it, you are done!¶

The major downside of this approach is that this is a static version of the notebook, it cannot be re-run or shared easily. You should keep a copy of the downloaded .ipynb on GitHub for the ease of reusing the notebook and keeping track of any changes.

If you are using plugins such as Crayon Syntax Highlighter. The <pre> tag must be set to class=”crayon:false” or something similar to disable the rendering by the plugin.