Posting Jupyter Notebook html notes

Question

I am a beginner at coding and I am trying to use a blog to keep a record of notes on learning.

I am using jupyter notebook for python, but can't find any solution for a simple way to copy a snippet of html code into the blog. I can only do it now by saving examples/notes as an image

Is there a simple way to do it , such as in this?

Answer 1

There are a few ways to do this, but I'm not sure that any of them are as quick/simple as you're imagining. A lot of this also depends on what blogging platform you use. For example, the second example you posted looks more like raw code that has been copy/pasted and then formatted by their blogging platform

Here's a few things you can try, but none of them offer direct "export cell" functionality. They also assume you only want a static notebook for display:

Export to HTML

Go to File > Download as > HTML

This will give you a HTML page with all of your cells nicely rendered. Its not that trivial to extract specific cells to post on a blog, but if you just want to display your entire notebook you have everything as a HTML that you can upload to wherever your blog is.

It will look exactly like your full notebook:

Export basic HTML template

You can use nbconvert to give you a basic HTML rendering of your notebook. Open a terminal, go to the directory where your notebook is located and type:

jupyter nbconvert name_of_notebook.ipynb --template basic

That will give you a html page without all of the flashy styling. This makes it much easier for you just copy/paste the specific cell you want (as HTML) into your blog. Your blog would then need some styling/syntax highlighting to make it look pretty

This will look like a simple rendering of your notebook:

As an aside, the first option (exporting the full HTML page) also uses nbconvert behind the scenes, just without the --template basic argument

Export to markdown

Go to File > Download as > Markdown

If your blogging platform supports markdown, you can export your notebook as a markdown file without all of the styling and copy/paste the cell you want into your blog post. Again, you'd need a way to style it on your blog

This will give you basic markdown code you can copy/paste anywhere:

```python
a = 2
b = 5
print(a+b)
```

    7

Upload to nbviewer

http://nbviewer.jupyter.org/

If you have your notebook uploaded as a github gist, or in a github repo, or any other direct location on the web, you can use nbviewer to render it as a nice webpage, but you cant extract elements to place in your blog so not sure how useful this is for your purposes

Styling HTML/markdown on Wordpress

If you're using wordpress as your blogging platform there are a few useful plugins that will make the process a bit easier:

• If you've exported a markdown file, you can use a plugin like Jetpack, which enables support for markdown in a blog post/page
• If you've copy/pasted your code into a blog post (either by copying the HTML, markdown, or raw code) you can style it using a syntax highlighter like Crayon
• If you really want your code to look like a jupyter notebook cell, you can use a plugin like Simple Custom CSS to set up custom styling, but this takes quite a bit of work. There are a few sites showing how to set up CSS to look like a notebook cell (e.g. http://www.mianchen.com/wordpress-blogging-with-jupyter-notebook-in-five-simple-steps/)
• If you have your notebook uploaded as a github gist, you can use oEmbed Gist to embed your notebook code into your post

For my own blog I've found the simplest solution to just copy/paste the raw code directly into my blog post, and then use plugins on the blogging platform (Wordpress in my case) to style the block of code