Make output cells like Markdown

Question

I like IPython's Markdown cells for incorporating HTML and other rich content inside notebooks. I would like to know if a command output can be formatted similarly, in output cells.

Here is one of my functions outputting HTML:

    print_html():
      print """
      <h2>Matplotlib's chart gallery (Click a chart to see the code to create it)</h2><br>
      <div align="center"> <iframe title="Matplotlib Gallery" width="950"
      height="250" src="http://matplotlib.org/gallery.html#api" frameborder="0"
      allowfullscreen></iframe></div>
    """

The HTML code above, if placed in markdown (input) cell, produces nice link to the Matplotlib library. But in output cell it is just plain text. Any way to make it rich content?

Solutions so far only work for functions that you call directly from IPython - what if we want to render html in print/logging methods called from within a function? — Peter, Mar 18 '15 at 08:30

nom-mon-ir · Accepted Answer · 2013-07-27T07:36:38.400

22

Found a solution here: http://mail.scipy.org/pipermail/ipython-user/2012-April/009838.html

Quoting the solution here for ref:

Brian Granger:

" Have the function return the raw HTML wrapped in an HTML object:

from IPython.core.display import HTML
...
...
def foo():
    raw_html = "<h1>Yah, rendered HTML</h1>"
    return HTML(raw_html)

"

Now calling foo() does give rich formatted html as I wanted.

edited Jul 27 '13 at 07:36

answered Dec 07 '12 at 20:43

nom-mon-ir

3,748
8
26
42

1

As the linked mail points out, you need to import HTML as follows: from IPython.core.display import HTML – GermanK Jun 07 '13 at 09:16
Thanks for improving this answer! – nom-mon-ir Jun 07 '13 at 12:32
But you cant mix it with some print. So like making a header and have some text printed out below – Norfeldt Jul 25 '13 at 14:48
You do not necessarily have to use print. Just add to the raw_html string whatever you wanted to print and then return HTML(raw_html) – nom-mon-ir Jul 25 '13 at 14:57
Note that you can also use markdown instead of HTML. First, import Markdown: `from IPython.core.display import Markdown`, then, return your markdown content on the last line with `Markdown(your_content_here)`. – miha Dec 19 '16 at 09:48

score 7 · Answer 2 · answered Oct 24 '15 at 02:07

A somehow more advanced solution was recently published in a blog post here:

http://guido.vonrudorff.de/ipython-notebook-code-output-as-markdown/

It creates and registers a new IPython magic %%asmarkdown. The output of each code cell which you prepend with this command will be rendered like pure markdown cells. Using the content of the original question, the following would behave as expected:

%%asmarkdown
print """
<h2>Matplotlib's chart gallery (Click a chart to see the code to create it)</h2><br>
<div align="center"> <iframe title="Matplotlib Gallery" width="950"
height="250" src="http://matplotlib.org/gallery.html#api" frameborder="0"
allowfullscreen></iframe></div>
"""

This worked super easily. The small exception of, for python 3 users, adding `from io import StringIO` instead of `from stringIO import StringIO`. — Little Bobby Tables, Nov 30 '15 at 14:19
This is the solution that best answers the original question. — Bo Nygaard Bai, Nov 03 '16 at 11:38

score 4 · Answer 3 · answered Jul 26 '13 at 06:56

Just adding some extra feature to your code example

htmlContent = ''

def header(text):
    raw_html = '<h1>' + str(text) + '</h1>'
    return raw_html

def box(text):
    raw_html = '<div style="border:1px dotted black;padding:2em;">'+str(text)+'</div>'
    return raw_html

def addContent(raw_html):
    global htmlContent
    htmlContent += raw_html


# Example
addContent( header("This is a header") )
addContent( box("This is some text in a box") )

from IPython.core.display import HTML
HTML(htmlContent)

gives you this:

OUTPUT

nice to see the fancy features! – nom-mon-ir Jul 27 '13 at 07:35 — nom-mon-ir, Jul 27 '13 at 07:35

Make output cells like Markdown

3 Answers3

Linked