Jupyter/Extensions - Revision history

Admin: /* Using User Contributed Notebook Extensions */

2017-12-09T14:46:54Z

Using User Contributed Notebook Extensions

← Older revision		Revision as of 14:46, 9 December 2017
Line 290:		Line 290:
	</pre>		</pre>

	==Using ~~User Contributed Notebook Extensions==~~		Using this repo as a template: https://github.com/ipython-contrib/jupyter_contrib_nbextensions

	~~Use~~ this repo as a template: https://github.com/ipython-contrib/jupyter_contrib_nbextensions

	This repo contains a large selection of extensions for notebook. An extension consists of a Javascript file and, optionally, a CSS file.		This repo contains a large selection of extensions for notebook. An extension consists of a Javascript file and, optionally, a CSS file.
Line 298:		Line 296:
	By loading an extension, you can provide functionality from the Javascript portion of a Jupyter notebook (ajax, updating text, rendering equations, etc.)		By loading an extension, you can provide functionality from the Javascript portion of a Jupyter notebook (ajax, updating text, rendering equations, etc.)

	~~Start by checking out a copy (optional):~~		To just use the extensions, install directly from pip:

	~~<pre>~~
	~~git clone https://github.com/ipython-contrib/jupyter_contrib_nbextensions~~
	~~</pre>~~

	~~Now build nb~~ extensions:

	~~<pre>~~
	~~cd jupyter_contrib_nbextensions~~
	~~pip~~ install ~~-e .~~
	~~</pre>~~

	or directly from pip ~~to just use the extensions~~:

	<pre>		<pre>
Line 322:		Line 307:
	pip install https://github.com/ipython-contrib/jupyter_contrib_nbextensions/tarball/master		pip install https://github.com/ipython-contrib/jupyter_contrib_nbextensions/tarball/master
	</pre>		</pre>



	==Also see==		==Also see==

Admin: /* Example */

2017-12-09T14:45:37Z

Example

← Older revision		Revision as of 14:45, 9 December 2017
Line 127:		Line 127:
	From the load_ipython_extension function, you can manipulate the DOM of the page, invoke several APIs provided by Jupyter, listen for Jupyter events, load other modules, etc.		From the load_ipython_extension function, you can manipulate the DOM of the page, invoke several APIs provided by Jupyter, listen for Jupyter events, load other modules, etc.

	===Example===		===Example WORKING OK===

	Let's say we want to make an extension called smoketest. It would go in the <code>src/jupyter_contrib_nbextensions/nbextensions</code> directory:		Let's say we want to make an extension called smoketest. It would go in the <code>src/jupyter_contrib_nbextensions/nbextensions</code> directory:

Admin: /* Build Extensions from Gists */

2017-12-09T14:45:04Z

Build Extensions from Gists

← Older revision		Revision as of 14:45, 9 December 2017
Line 107:		Line 107:
	</pre>		</pre>

	==~~Build~~ Extensions ~~from Gists~~==		==Installing Notebook Extensions==

	===~~The Vision~~===		===Bundling and Distributing===

	~~This is an intriguing blog post: https://mindtrove~~.~~info/4-ways-~~to~~-extend-~~jupyter-~~notebook~~/~~#nb-extensions~~		Linked article recommends writing setup.py to install jupyter-pip to take care of packaging a python module/package as a Jupyter extension.

	~~{{Quote\|~~		jupyter-pip eases the setup process for that...??? - https://github.com/jdfreder/jupyter-pip
	~~Today,~~ the recommended way of installing, loading, and unloading extensions requires running a few snippets of code either within a notebook associated with an IPython kernel or in an external Python script. To install, for ~~example, minrk's gist nbextension, you can execute the following code in a notebook.~~

	~~<pre>~~
	~~import notebook~~.~~nbextensions~~
	~~notebook~~.~~nbextensions~~.~~install_nbextension('~~https://~~rawgithub~~.com/~~minrk/ipython_extensions/master/nbextensions/gist.js', user=True)~~
	~~</pre>~~

	~~The code above downloads the JavaScript file and copies it into your Jupyter data directory (e.g., ~/.local/share~~/jupyter~~/nbextensions). Once installed, you can load the gist extension by executing the following JavaScript in a code cell:~~

	~~<pre>~~
	~~%%javascript~~
	~~Jupyter.utils.load_extensions('gist')~~
	~~</pre>~~

	The cell above emits a <nowiki><script></nowiki> element into the output area of the notebook cell. That script loads the gist.js JavaScript module from the Notebook server backend. On load, the gist extension adds a button appears to the toolbar which you can click to post the current notebook document as a gist.
	}}

	~~Now a notebook configuration file can be updated to load the extension automatically:~~

	~~<pre>~~
	~~from notebook.services.config import ConfigManager~~
	~~cm = ConfigManager()~~
	~~cm.update('notebook', {"load_extensions": {"gist": True}})~~
	~~</pre>~~

	===How It Works===		===How It Works===

	~~Again, see~~: https://mindtrove.info/4-ways-to-extend-jupyter-notebook/#nb-extensions		See: https://mindtrove.info/4-ways-to-extend-jupyter-notebook/#nb-extensions

	(From 2015, but about Jupyter - how much has changed?)		(From 2015, but about Jupyter - how much has changed?)
Line 313:		Line 289:
	jupyter nbextension enable smoketest/smoke		jupyter nbextension enable smoketest/smoke
	</pre>		</pre>

	~~===Bundling and Distributing===~~

	~~Linked article recommends writing setup.py to install jupyter-pip to take care of packaging a python module/package as a Jupyter extension.~~

	~~jupyter-pip eases the setup process for that...??? - https://github.com/jdfreder/jupyter-pip~~

	==Using User Contributed Notebook Extensions==		==Using User Contributed Notebook Extensions==

Admin: /* Using User Contributed Notebook Extensions */

2017-12-09T14:33:59Z

Using User Contributed Notebook Extensions

← Older revision		Revision as of 14:33, 9 December 2017
Line 355:		Line 355:


			==Also see==

			Bundling Jupyter extensions as packages:

			[[Jupyter/ExtensionPackage]]


Line 362:		Line 366:

	[[Category:Jupyter]]		[[Category:Jupyter]]

			[[Category:Jupyter Extensions]]

Admin: /* Example */

2017-12-09T09:26:19Z

Example

← Older revision		Revision as of 09:26, 9 December 2017
Line 156:		Line 156:

	<pre>		<pre>
			$ git clone https://github.com/ipython-contrib/jupyter_contrib_nbextensions.git
	$ cd jupyter_contrib_nbextensions		$ cd jupyter_contrib_nbextensions
	$ ls -R src/jupyter_contrib_nbextensions/nbextensions		$ ls -R src/jupyter_contrib_nbextensions/nbextensions
Line 302:		Line 303:
	Enabling notebook extension smoketest/smoke...		Enabling notebook extension smoketest/smoke...
	- Validating: OK		- Validating: OK
			</pre>

			===Example Summarized===

			<pre>
			git clone https://github.com/ipython-contrib/jupyter_contrib_nbextensions.git
			cd jupyter_contrib_nbextensions
			jupyter contrib nbextension install --user
			jupyter nbextension enable smoketest/smoke
	</pre>		</pre>

Admin: /* Example */

2017-12-09T09:12:13Z

Example

← Older revision		Revision as of 09:12, 9 December 2017
Line 294:		Line 294:
	<pre>		<pre>
	jupyter nbextension enable smoketest/smoke		jupyter nbextension enable smoketest/smoke
			</pre>

			Output from last command should be a success:

			<pre>
			$ jupyter nbextension enable smoketest/smoke
			Enabling notebook extension smoketest/smoke...
			- Validating: OK
	</pre>		</pre>

Admin: /* Example */

2017-12-09T09:11:52Z

Example

← Older revision		Revision as of 09:11, 9 December 2017
Line 162:		Line 162:
	src/jupyter_contrib_nbextensions/nbextensions/smoketest:		src/jupyter_contrib_nbextensions/nbextensions/smoketest:
	README.md		README.md
	~~main~~.css		smoke.css
	~~main~~.js		smoke.js
	smoketest.yaml		smoketest.yaml
	</pre>		</pre>
Line 226:		Line 226:
	</pre>		</pre>

	Same thing with the CSS file, which just changes the header color to red:		Same thing with the CSS file, which just changes the header h1 color and a test div text color to red:

	<pre>		<pre>
	~~$ cat main.css~~
	h1 {		h1 {
			color: #ff0000;
			}
			div#crazy {
	color: #ff0000;		color: #ff0000;
	}		}
Line 286:		Line 288:
	],		],

			</pre>

			The last step is to tell it where you have your include files, in this case smoke.js:

			<pre>
			jupyter nbextension enable smoketest/smoke
	</pre>		</pre>

Admin: /* Example */

2017-12-09T03:50:00Z

Example

@@ Line 272: / Line 272: @@
 [I 19:35:06 InstallContribNbextensionsApp] - Writing config: /Users/charles/.jupyter/jupyter_nbconvert_config.json
 [I 19:35:06 InstallContribNbextensionsApp] --  Writing updated config file /Users/charles/.jupyter/jupyter_nbconvert_config.json
 </pre>

Admin: /* Example */

2017-12-09T03:43:01Z

Example

@@ Line 240: / Line 240: @@
 cd jupyter_contrib_nbextensions
 jupyter contrib nbextension install --user
 </pre>

Admin: /* Example */

2017-12-09T03:41:18Z

Example

← Older revision		Revision as of 03:41, 9 December 2017
Line 233:		Line 233:
	color: #ff0000;		color: #ff0000;
	}		}
			</pre>

			To actually install this, go back to the <code>jupyter_contrib_nbextensions</code> directory:

			<pre>
			cd jupyter_contrib_nbextensions
			jupyter contrib nbextension install --user
	</pre>		</pre>