How to embed HTML in iPython output?

Question

Can I embed visualized HTML output in iPython output?

One way is to use

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

or (IPython alias alias)

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

Returns a formatted link, but

• This link does not open the browser with the web page itself from the console. IPython laptops support fair rendering.
• I don't know how to render an HTML() object inside, say, a pandas list or table. You can do df.to_html() , but without the links inside the cells.
• This output is not interactive in the PyCharm Python console (because it is not QT).

How can I overcome these shortcomings and make iPython's output more interactive?

Answer 1

This seems to work for me:

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

The trick is to wrap it in a "display" too.

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

Answer 2

Some time ago, Jupyter Notebooks began to remove JavaScript from HTML content [ # 3118 ]. Here are two solutions:

Local HTML Service

If you want to embed an HTML page with JavaScript on your page now, the easiest way is to save your HTML file in a directory with a notebook, and then load the HTML as follows:

 from IPython.display import IFrame IFrame(src='./nice.html', width=700, height=600) 

---

Remote HTML Service

If you prefer a hosting solution, you can upload your HTML page to the Amazon Web Services basket in S3, change the settings of this container to make the host host a static website, and then use the 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) 

This will render your HTML content and JavaScript in an iframe, like on any other web page:

 <iframe src='https://s3.amazonaws.com/duhaime/blog/visualizations/isolation-forests.html', width=700, height=600></iframe> 

Answer 3

Related: when creating the class def _reper_html_(self):... can be used to create a custom HTML representation of its instances:

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

will display as:

Hello world !

See the IPython documentation for more information.

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:

1. ☐ buy milk
2. ☐ do homework
3. ☑ play video games

Answer 4

Turning higher on @Harmon, it looks like you can combine the display and print statements together ... if you need to. Or maybe it’s easier to just format all the HTML in one line and then use the display. Anyway, a nice feature.

 display(HTML('<h1>Hello, world!</h1>')) print("Here 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>')) 

Outputs something like this:

---

Hello World!

Here's the link:

www.google.com

some more printed text ...

Paragraph text here ...

---

Answer 5

I was looking for a specific answer for a Jupyter laptop and could not find it, so I will leave it here:

The Jupyter Notebook Markdown Cells display HTML tags:

 <a href="your_link_here.com">Your text here!</a>