如何将HTML嵌入IPython输出中？

158

是否可以将呈现的HTML输出嵌入到IPython输出中？

一种方法是使用

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

或（IPython多行单元格别名）

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

哪个返回格式化的链接，但是

此链接不会从控制台打开带有网页本身的浏览器。不过，IPython笔记本支持诚实渲染。
我不知道如何HTML()在列表或pandas打印表中呈现对象。您可以这样做df.to_html()，但无需在单元格内建立链接。
此输出在PyCharm Python控制台中不是交互式的（因为它不是QT）。

如何克服这些缺点并使IPython输出更具交互性？

— 安东·塔拉森科（Anton Tarasenko）
source

2

这是你想做的吗？ipython.org/ipython-doc/dev/config/integrating.html

— CEL

@cel它格式化HTML输出，就像HTML()做，但我还是没能解决项目1和2

— 安东塔拉先科

2

我不是专家，所以这可能是错误的，但是我觉得将任意html代码注入其他对象的表示形式是行不通的。这将逻辑和对象表示耦合在一起，可能是不希望的。但是您肯定可以编写包含原始对象的包装对象，并使用repr_html方法提供自定义html表示形式。

— 2014年

实际上，我只是运行了您的代码，将其移至其他单元

— 后就

添加JavaScript：stackoverflow.com/questions/16852885/...

— 安东塔拉先科

252

这似乎为我工作：

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

诀窍是也将其包装在“显示”中。

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

— 哈蒙
source

2

这个版本可以执行javascirpt吗？

— 约书亚·摩尔

4

以下是一个示例笔记本的链接，该笔记本显示了显示的可能性：丰富的输出

— Romain

1

在显示部分让我的JavaScript嵌入在笔记本

— lamecicle

如果我需要使用Dash创建网站并且我所有的python代码都位于Jupyter .ipynb文件中，那么这是一种可行的网站生成方法吗？

— user8322222 '19

我的意思是，如果我需要创建一个包含由Dash和Flask制成的仪表板的网站，而我的所有代码都位于jupyter .ipynb文件中，我可以仅使用Atom中单独的html和css文件来执行该部分并将其链接至Jupyter文件中的代码还是我的所有代码都需要位于.Ipynb文件中。非常感谢您的帮助，因为我是新手。

— user8322222 '19

34

一段时间以前，Jupyter Notebooks开始从HTML内容中剥离JavaScript [ ＃3118 ]。这是两个解决方案：

提供本地HTML

如果要立即在页面上嵌入带有JavaScript的HTML页面，最简单的方法是使用笔记本将HTML文件保存到目录中，然后按以下方式加载HTML：

from IPython.display import IFrame

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

提供远程HTML

如果您喜欢托管解决方案，则可以在S3中将HTML页面上传到Amazon Web Services“存储桶”，更改该存储桶上的设置，以使该存储桶托管静态网站，然后在笔记本中使用Iframe组件：

from IPython.display import IFrame

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

就像在其他任何网页上一样，这将在iframe中呈现HTML内容和JavaScript：

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

展开摘要

— 杜海姆
source

1

非常感谢。那就是我想要的。我用它在静态博客网站

— Okroshiashvili，

本地文件会比在AWS上扔东西容易吗？

— vy32

1

太棒了！正是我需要的-因为我想在Amazon SageMaker的Jupyter Notebook上托管整个Web应用程序。谢谢！

— 阿迪·莱文

2

要获得额外的标记，请从一个单元异步运行一个交互式Web服务器，并与它在其他单元的iFrame中创建的页面进行交互！

— holdenweb '19

1

在gist.github.com/holdenweb/fb8de56e33cdfaef9218673915cc7f1c中

— holdenweb

13

相关：在构造类时，def _repr_html_(self): ...可用于创建其实例的自定义HTML表示形式：

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

o = Foo()
o

将呈现为：

世界你好！

有关更多信息，请参阅IPython的文档。

一个高级示例：

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

将呈现：

☐购买牛奶

☐做作业

☑玩电子游戏

— 乌迪
source

9

在上面的@Harmon上展开，看来您可以将displayand print语句组合在一起……如果需要的话。或者，将整个HTML格式化为一个字符串然后使用显示可能会更容易。无论哪种方式，不错的功能。

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>'))

输出如下所示：

你好，世界！

这里是一个链接：

www.google.com

一些更多的印刷文字...

此处的段落文字...

— 约瑟夫·特鲁
source