Embed Jupyter Notebooks in WordPress (IPython)

This will demonstrate the use of iframes and nbviewer to embed Jupyter (formerly known as IPython) notebooks in WordPress. For example syntax that works in most cases, enter your equivalent to this in the Text tab of the WordPress editor:

[iframe src="http://nbviewer.jupyter.org/url/eagle.fish.washington.edu/Arabidopsis/iPythonNotebooks/20160411_Concatenate_Oly_MBDseq.ipynb" width="100%" same_height_as="window" scrolling="yes"]

That will render from Jupyter (IPython) as shown below, an implementation of the syntax above. Following this example are additional parameters you can use to modify the appearance and function of an iframe, here in the Open Notebook Science Network.

iframe parameters and defaults:

  • src – source of the iframe [iframe src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default src=”https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97″);
  • width – width in pixels or percentage [iframe width="100%" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] or [iframe width="640" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default width=”100%”);
  • height – height in pixels [iframe height="480" src="https://www.youtube.com/watch?v=bGsKfEKVLdI&list=PL18515FB92008FA97"] (by default height=”480″);
  • scrolling – parameter [iframe scrolling="yes"] (by default scrolling=”no”);
  • frameborder – parameter [iframe frameborder="0"] (by default frameborder=”0″);
  • marginheight – parameter [iframe marginheight="0"] (removed by default);
  • marginwidth – parameter [iframe marginwidth="0"] (removed by default);
  • allowtransparency – allows to set transparency of the iframe [iframe allowtransparency="true"] (removed by default);
  • id – allows to add the id of the iframe [iframe id="my-id"] (removed by default);
  • class – allows to add the class of the iframe [iframe class="my-class"] (by default class=”iframe-class”);
  • style – allows to add css styles of the iframe [iframe style="margin-left:-30px;"] (removed by default);
  • same_height_as – allows to set the height of iframe same as target element [iframe same_height_as="body"], [iframe same_height_as="div.sidebar"], [iframe same_height_as="div#content"], [iframe same_height_as="window"] – iframe will have the height of the viewport (visible area), [iframe same_height_as="document"] – iframe will have the height of the document, [iframe same_height_as="content"] – auto-height feature, so the height of the iframe will be the same as embedded content. [[same_height_as="content"]] works only with the same domain and subdomain. Will not work if you want to embed page “sub.site.com” on page “site.com”. (removed by default);
  • get_params_from_url – allows to add GET parameters from url to the src of iframe; Example: page url – site.com/?prm1=11, shortcode – [iframe src="embed.com" get_params_from_url="1"], iframe src – embed.com?prm1=11 (disabled by default);
  • any_other_param – allows to add new parameter of the iframe [iframe any_other_param="any_value"];
  • any_other_empty_param – allows to add new empty parameter of the iframe (like “allowfullscreen” on YouTube) [iframe any_other_empty_param=""];

Note: while this is ability is enabled here in the Open Notebook Science Network, it is not enabled in all WordPress sites and networks hosted by the Open Science Federation, nor is it enabled in most other WordPress sites, including WordPress.com, for security reasons.

This network is moderated and optimised for Open Notebook Science. Embedding from a Jupyter (IPython) notebook is one of many features for Open Science, others including licensing management for media, integration with Zotero for reference management, syntax highlighting, MathJax-LaTeX, etc. Active monitoring and maintenance by the Open Science Federation makes secure implementation possible. Questions welcome at @ONScience on Twitter or at its parent account, @openscience.

One thought on “Embed Jupyter Notebooks in WordPress (IPython)

  1. Pingback: [Python] 怎麼在 wordpress 裡面分享 ipython notebook? | Victor Gau

Leave a Reply