HTMLをIPython出力に埋め込む方法は?


158

レンダリングされたHTML出力をIPython出力に埋め込むことはできますか?

1つの方法は使用することです

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

または(IPythonマルチラインセルエイリアス)

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

これはフォーマットされたリンクを返しますが、

  1. このリンクは、コンソールからWebページ自体を含むブラウザを開きません。ただし、IPythonノートブックは正直なレンダリングをサポートしています。
  2. HTML()リストやpandas印刷されたテーブル内でオブジェクトをレンダリングする方法を知りません。できますがdf.to_html()、セル内にリンクを作成する必要はありません。
  3. この出力は、PyCharm Pythonコンソールではインタラクティブではありません(QTではないため)。

これらの欠点を克服し、IPython出力をもう少しインタラクティブにするにはどうすればよいですか?


2
これはあなたがやりたいことですか?ipython.org/ipython-doc/dev/config/integrating.html
cel

@celはhtml出力と同じようにフォーマットしますHTML()が、アイテム1と2を解決できませんでした
Anton Tarasenko

2
私はエキスパートではないので、これは間違っている可能性がありますが、他のオブジェクトの表現に任意のhtmlコードを挿入しても機能しないと思います。これは、ロジックとオブジェクトの表現を結合するため、おそらく望ましくありません。ただし、元のオブジェクトを含むラッパーオブジェクトを作成し、repr_htmlメソッドを使用してカスタムhtml表現を提供することもできます。
2014

実際、私はあなたのコードを実行しましたが、別のセルに移動するとすぐに機能しました...
Goodword

回答:


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


2
このバージョンはjavascirptを実行できますか?
ジョシュアムーア

4
表示の可能性を示すノートブック例へのリンクは次のとおりです。リッチ出力
Romain

1
ディスプレイ部分は私がノートにJavaScriptを埋め込むことが許さ
lamecicle

Dashで作成する必要があり、すべてのPythonコードがJupyter .ipynbファイルにある場合、これはWebサイトを作成するための実行可能な方法ですか?
user8322222

私が意味したことは、ダッシュとフラスコで作られたダッシュボードを含むウェブサイトを作成する必要があり、すべてのコードがjupyter .ipynbファイルにある場合、その部分を実行してリンクするためにAtomで別個のhtmlファイルとcssファイルを使用できますか? Jupyterファイルのコード、またはすべてのコードを.Ipynbファイルに含める必要がありますか。私はこれが初めてなので、この点でどんな助けでも感謝します。
user8322222

34

少し前に、Jupyter NotebooksはHTMLコンテンツからJavaScriptを取り除き始めました[ #3118 ]。2つのソリューションがあります。

ローカルHTMLの提供

JavaScriptを使用してHTMLページをページに埋め込む場合、最も簡単な方法は、ノートブックのあるディレクトリにHTMLファイルを保存し、次のようにHTMLをロードすることです。

from IPython.display import IFrame

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

リモートHTMLの提供

ホスト型ソリューションを希望する場合は、HTMLページをS3のAmazon Webサービス「バケット」にアップロードし、そのバケットの設定を変更して、バケットが静的なWebサイトをホストするようにしてから、ノートブックでIframeコンポーネントを使用できます。

from IPython.display import IFrame

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

これにより、他のWebページと同じように、HTMLコンテンツとJavaScriptがiframeにレンダリングされます。

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


1
どうもありがとう。それが私が探していたものです。これを使用して、静的なブログサイトでインタラクティブなプロットチャートをレンダリングします
Okroshiashvili

ローカルファイルはAWSに何かを投げるよりも簡単ではないでしょうか?
vy32

1
これは完璧です!Amazon SageMakerのJupyter NotebookでWebアプリケーション全体をホストしたいためです。ありがとう!
Adi Levin

2
追加のマークについては、インタラクティブなWebサーバーをセルから非同期で実行し、他のセルのiFrame内に作成するページとやり取りします。
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

レンダリングします:

  1. milk牛乳を買う
  2. home宿題をする
  3. videoビデオゲームをプレイする

9

上記の@Harmonを展開すると、必要に応じてdisplayand printステートメントを組み合わせることができるように見えます... または、HTML全体を1つの文字列としてフォーマットし、表示を使用する方が簡単かもしれません。いずれにせよ、素晴らしい機能です。

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

もう少し印刷されたテキスト...

ここに段落テキスト...


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.