[PYTHON] Paste Jupyter Notebook document into Wordpress

Jupyter Notebook is an execution environment for Python programs (which seems to be available in other languages such as R these days), and allows you to combine programs, their execution results, and documents into one. Especially when graphing data using matplotlib, it is very convenient to be able to manage the graph of the program and its execution result and the comments for them collectively. For more information on Jupyter Notebook, please refer to the next page.

• Recommended coding environment Jupyter Notebook for data scientists
• [Let's use Jupyter Notebook](http://pythondatascience.plavox.info/python%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2% 83 / jupyter-notebook% E3% 82% 92% E4% BD% BF% E3% 81% A3% E3% 81% A6% E3% 81% BF% E3% 82% 88% E3% 81% 86 /)

You can publish the Jupyter Notebook documentation on Gist, but you may still want to paste it on your blog or your own site. I've investigated how to paste Jupyter Notebook documents when a blog or site is managed by Wordpress, so I will summarize it.

How to paste a Jupyter Notebook document into Wordpress

I searched on the web and it seems that there are several methods.

Method 1. Convert .ipynb file to html file with nbconvert and input it to Wordpress Method 2. Paste what you published to Gist into Wordpress Method 3. Output the html file with Jupyter Notebook and paste it with iframe

The easy way is to paste the one published in Method 2 Gist. Since it is pasted in the frame, there is no problem with short programs, but it feels cramped when pasting a document with a certain length written in Jupyter Notebook. Method 3 is also pasted in the frame, so it is the same.

Method 1 is introduced, for example, in "WordPress Blogging with Jupyter Notebook in Five Simple Steps". I am. It takes a lot of work, but it's nice to be able to display the page on which Jupyter Notebook is pasted and the page created directly with Wordpress in the same style.

This is a concrete method.

1. Create content with Jupyter Notebook and save You will have an .ipynb file.

2. Convert to html file with nbconvert

$ jupyter nbconvert --to html --template basic created file.ipynb

3. Paste the created html file into the Wordpress text screen

4. Add the last CSS shown to the Wordpress CSS file

This CSS can be found in "WordPress Blogging with Jupyter Notebook in Five Simple Steps". It is a blog. In the original, I used to specify colors for .s and .s1, but since .s1 was used elsewhere in my environment, I decided not to specify it here.

sample

One of the pages created by the method introduced here is the next page.

• "Handling Ambient data in Python"

I wrote a Python program, matplotlib graphs, and explanatory documents in Jupyter Notebook and pasted them into Wordpress, but I was able to write in the same style as other document pages.

CSS to add

/************** Jupyter Notebook CSS ************************/
.input_prompt {
    color: #0066cc;
}
.output_prompt{
    color:#cc0000;
}
.prompt{
    font-family: monospace;
    font-size: 14px;
}
.c, c1 {
    color: #408080;
    font-style: italic;
}
.k {
    color: #338822;
    font-weight: bold;
}
.kn {
    color: #338822;
    font-weight: bold;
}
.mi {
    color: #008800;
}
.mf {
    color: #008800;
}
.o {
    color: #9966ff;
}
.ow {
    color: #BA22FF;
    font-weight: bold;
}
.nb {
    color: #338822;
}
.n {
    color: #000000;
}
.s {
    color: #cc2222;
}
.se {
    color: #cc2222;
    font-weight: bold;
}
.si {
    color: #C06688;
    font-weight: bold;
}
.nn {
    color: #4D00FF;
    font-weight: bold;
}
.output_area pre {
    background-color: #FFFFFF;
    padding-left: 5%;
}
.code_cell {
    padding-left: 1%;
}
.cell {
    margin-top: 10px;
    margin-bottom: 10px;
}
br {
    line-height: 2;
}
.cell h1, h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}
/************** Jupyter Notebook CSS ************************/