Coder Perfect

How can I include HTML in my IPython output?

Problem

Is it feasible to include HTML generated output in IPython output?

One option is to utilize

from IPython.core.display import HTML
HTML('<a href="http://example.com">link</a>')

alternatively (IPython multiline cell alias)

%%html
<a href="http://example.com">link</a>

Which, although returning a formatted link,

What can I do to address these issues and make IPython output more interactive?

Asked by Anton Tarasenko

Solution #1

This seemed to be effective for me:

from IPython.core.display import display, HTML
display(HTML('<h1>Hello, world!</h1>'))

The trick is to also wrap it in “display.”

Source: http://python.6.x6.nabble.com/Printing-HTML-within-IPython-Notebook-IPython-specific-prettyprint-tp5016624p5016631.html

Answered by Harmon

Solution #2

Jupyter Notebooks started removing JavaScript from HTML content a while ago [#3118]. Here are two possibilities:

Serving Local HTML

The simplest way to embed an HTML page with JavaScript on your page right now is to save your HTML file to the directory with your notebook and then load it as follows:

from IPython.display import IFrame

IFrame(src='./nice.html', width=700, height=600)

Serving Remote HTML

If you’d rather utilize a hosted solution, you may upload your HTML page to an Amazon Web Services “bucket” in S3, update the bucket’s settings to make it a static website, and then use an Iframe component in your notebook:

from IPython.display import IFrame

IFrame(src='https://s3.amazonaws.com/duhaime/blog/visualizations/isolation-forests.html', width=700, height=600)

Your HTML content and JavaScript will be rendered in an iframe, just like any other web page:

Answered by duhaime

Solution #3

Define _repr html (self): _repr html (self): _repr html (self): _repr html (self): _re …may be used to generate a unique HTML representation of its instances:

class Foo:
    def _repr_html_(self):
        return "Hello <b>World</b>!"

o = Foo()
o

will render as:

Refer to the IPython documentation for more information.

An advanced example:

from html import escape # Python 3 only :-)

class Todo:
    def __init__(self):
        self.items = []

    def add(self, text, completed):
        self.items.append({'text': text, 'completed': completed})

    def _repr_html_(self):
        return "<ol>{}</ol>".format("".join("<li>{} {}</li>".format(
            "☑" if item['completed'] else "☐",
            escape(item['text'])
        ) for item in self.items))

my_todo = Todo()
my_todo.add("Buy milk", False)
my_todo.add("Do homework", False)
my_todo.add("Play video games", True)

my_todo

Will render:

Answered by Udi

Solution #4

Expanding on @Harmon’s comment, it appears that you can mix the display and print statements… if necessary. Alternatively, you might prepare the entire HTML as a single string and then use show. In any case, it’s a good feature.

display(HTML('<h1>Hello, world!</h1>'))
print("Here's a link:")
display(HTML("<a href='http://www.google.com' target='_blank'>www.google.com</a>"))
print("some more printed text ...")
display(HTML('<p>Paragraph text here ...</p>'))

This is what it produces:

Here’s a link:

www.google.com

a few more printed words…

Here’s the text for the paragraph…

Answered by Joseph True

Solution #5

First, the code:

from random import choices

def random_name(length=6):
    return "".join(choices("abcdefghijklmnopqrstuvwxyz", k=length))
# ---

from IPython.display import IFrame, display, HTML
import tempfile
from os import unlink

def display_html_to_frame(html, width=600, height=600):
    name = f"temp_{random_name()}.html"
    with open(name, "w") as f:
        print(html, file=f)
    display(IFrame(name, width, height), metadata=dict(isolated=True))
    # unlink(name)

def display_html_inline(html):
    display(HTML(html, metadata=dict(isolated=True)))

h="<html><b>Hello</b></html>"    
display_html_to_iframe(h)
display_html_inline(h)

Some quick notes:

Answered by Charles Merriam

Post is based on https://stackoverflow.com/questions/25698448/how-to-embed-html-into-ipython-output