Skip to main content

Include Html in Jupyter notebook



I just discovered something that is great and simple at the same time... how to include html in the Jupyter notebook.
As I want to create easily graphic content for different purposes (and you see in the last post what I mean) I find it just... sensational... or is it just me?

So, I will make a short example, as I am used to do... and lately we sill make something more complicated, maybe.

Ok... go in the cmd and write

jupyter notebook

or 

ipython notebook

create a notebook and write this in a cell



%%%html

<button onclick="alert('Ciao')">Ciao</button>


There we go! We have a button... it's all in html! And the button works. Isn't it great?

See ya.

Some languages you can use in the Jupyter Notebook.
%%html
Render the cell as a block of HTML
%%javascript
Run the cell block of Javascript code
%%latex
Render the cell as a block of latex
%%perl
%%perl script magic
Run cells with perl in a subprocess.
This is a shortcut for %%script perl
%%pypy
%%pypy script magic
Run cells with pypy in a subprocess.
This is a shortcut for %%script pypy
%%python
%%python script magic
Run cells with python in a subprocess.
This is a shortcut for %%script python
%%python2
%%python2 script magic
Run cells with python2 in a subprocess.
This is a shortcut for %%script python2
%%python3
%%python3 script magic
Run cells with python3 in a subprocess.
This is a shortcut for %%script python3
%%ruby
%%ruby script magic
Run cells with ruby in a subprocess.
This is a shortcut for %%script ruby

Comments

Popular posts from this blog

Widgets for Jupyter Notebook: a text input widget

Widgets for Jupyter notebook ¶ Let's import the module ipywidgets into the Jupyter Notebook from ipywidgets import widgets from ipywidgets import * from traitlets import * Now we import the display function from IPython ¶ let's attach a function to the event on_submit After we run this cell, we can go up and write something in the text widget and after you submit the text you wrote will be printed after the cell from IPython.display import display text = widgets . Text () display ( text ) def handle_submit ( sender ): print ( "Thank you for entering this text:" , text . value ) text . on_submit ( handle_submit ) Thank you for entering this text: Ciao

Image in Jupyter and PIL step by step

Hi, """ Hi, we will see a step by step tutorial about PIL and IPython.core.display modules to create images from other images and diplaying them in Jupyter notebook """ # What we will do # Create a card # 1. Take a pic of a heart # 2. Create an image blanck the size of a card 90*130 # 3. Paste the heart in the middle # 4. show the card """ As first step wi will simply display an image on the notebook. I will show two way to display the image with 'display' from IPhyton a. Using the open method of PIL.Image (named Img) b. Using the Image method from the IPython.core.display module """ # 1. Take the pic of a heart from IPython.core.display import Image , display from PIL import Image as Img heart = 'img/heart.png' display ( Image ( heart )) display ( Img . open ( heart )) # 2. Create an image blanck the size of a card 90*130 # 3. Paste the heart in the middle #...

Let's draw a circle with PIL in Python

Let's continue making our coding around PIL. Let's start with some basic drawing: a circle from PIL import Image , ImageDraw img = Image . new ( "RGB" ,( 60 , 60 ), 'white' ) dr = ImageDraw . Draw ( img ) dr . ellipse (( 0 , 0 , 60 , 60 ), 'yellow' ) img . show () this is the image produced *If you use jupyter notebook, just write img at the end to see the output.