HTML'yi IPython çıktısına nasıl ekleyebilirim?


158

Oluşturulan HTML çıktısını IPython çıktısına gömmek mümkün mü?

Bir yolu kullanmaktır

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

veya (IPython çok satırlı hücre diğer adı)

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

Biçimlendirilmiş bir bağlantı döndüren, ancak

  1. Bu bağlantı, web sayfasının kendisi konsoldan gelen bir tarayıcı açmaz . Ancak IPython dizüstü bilgisayarlar dürüst oluşturmayı destekler.
  2. HTML()Bir liste veya pandasbasılı tablo içinde nesnenin nasıl oluşturulacağının farkında değilim . Yapabilirsiniz df.to_html(), ancak hücrelerin içinde bağlantılar yapmadan.
  3. Bu çıktı PyCharm Python konsolunda etkileşimli değildir (çünkü QT değildir).

Bu eksikliklerin üstesinden nasıl gelebilir ve IPython çıktısını biraz daha etkileşimli hale nasıl getirebilirim?



@cel Html çıktısını aynen olduğu gibi biçimlendirir HTML(), ancak yine de 1 ve 2. maddeleri çözemedim.
Anton Tarasenko

2
Ben bir uzman değilim, bu yüzden bu yanlış olabilir, ama diğer nesnelerin temsili keyfi html kodu enjekte işe yaramaz hissediyorum. Bu, bir nesnenin mantığını ve temsilini birleştirir ve muhtemelen arzu edilmez. Ancak, orijinal nesneyi içeren sarmalayıcı nesneleri yazabilir ve özel bir html temsili sağlamak için repr_html yöntemini kullanabilirsiniz .
cel

Aslında, ben sadece kodunu çalıştırdı ve farklı bir hücreye taşındığında en kısa sürede çalıştı ...
Goodword

Yanıtlar:


253

Bu benim için işe yarıyor gibi görünüyor:

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

İşin püf noktası onu "ekrana" sarmaktır.

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


2
Bu sürüm javascirpt exeucte olabilir mi?
Joshua Moore

4
Ekran olasılıklarını gösteren örnek bir not defterine bağlantı: Rich Output
Romain

1
Ekran kısmı bir defter gömmek JavaScript izin verdi
lamecicle

Bu Dash ile yapmak gerekiyorsa ve tüm python kodum Jupyter .ipynb dosyasında bir web sitesi üretmek için uygun bir yöntem mi?
user8322222

Demek istediğim, Dash ve Flask'tan yapılmış bir gösterge tablosu içeren bir web sitesi yapmam gerekiyorsa ve tüm kodum jupyter .ipynb dosyalarındaysa, sadece bu kısmı yapmak ve bağlamak için Atom'da ayrı bir html ve css dosyaları kullanabilir miyim Jupyter dosyalarındaki kod veya tüm kodum .Ipynb dosyasında olması gerekiyor mu. Ben bu konuda yeni olduğum için bu noktada herhangi bir yardım için teşekkür ederiz.
user8322222

34

Bir süre önce Jupyter Notebooks, HTML içeriğinden JavaScript'i çıkarmaya başladı [ # 3118 ]. İşte iki çözüm:

Yerel HTML Sunma

Şimdi sayfanıza JavaScript içeren bir HTML sayfası gömmek istiyorsanız, yapılacak en kolay şey HTML dosyanızı not defterinizle dizine kaydetmek ve ardından HTML'yi aşağıdaki gibi yüklemektir:

from IPython.display import IFrame

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

Uzak HTML Sunma

Barındırılan bir çözümü tercih ediyorsanız, HTML sayfanızı S3'teki bir Amazon Web Services "grubuna" yükleyebilir, grubun statik bir web sitesi barındırması için bu gruptaki ayarları değiştirebilir ve daha sonra not defterinizde bir Iframe bileşeni kullanabilirsiniz:

from IPython.display import IFrame

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

Bu, HTML içeriğinizi ve JavaScript'inizi tıpkı diğer web sayfalarında olduğu gibi bir iframe'de oluşturur:

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


1
Çok teşekkürler. Aradığım şey buydu. Bunu statik blog sitemde etkileşimli grafikler oluşturmak için kullanıyorum
Okroshiashvili

Yerel bir dosya AWS'ye bir şey atmaktan daha kolay olmaz mıydı?
vy32

1
Bu harika! Tam olarak ihtiyacım olan şey - çünkü Amazon SageMaker'ın bir Jupyter Notebook'da tüm bir web uygulamasını barındırmak istiyorum. Teşekkürler!
Adi Levin

2
Ekstra işaretler için, etkileşimli bir web sunucusunu bir hücreden eşzamansız olarak çalıştırın ve diğer hücrelerdeki bir iFrame içinde oluşturduğu sayfalarla etkileşime geçin!
holdenweb


13

İlgili: Bir sınıf def _repr_html_(self): ...oluştururken, örneklerinin özel bir HTML temsilini oluşturmak için kullanılabilir:

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

o = Foo()
o

şu şekilde oluşturulur:

Merhaba Dünya !

Daha fazla bilgi için IPython'un belgelerine bakın .

Gelişmiş bir örnek:

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

Oluşturacak:

  1. ☐ Süt al
  2. ☐ Ödev yapmak
  3. Video Video oyunları oyna

9

Yukarıdaki @Harmon'da genişlemek, displayve printifadelerini birleştirebileceğiniz gibi görünüyor ... gerekiyorsa. Ya da, tüm HTML'nizi tek bir dize olarak biçimlendirmek ve sonra görüntüyü kullanmak belki daha kolaydır. Her iki durumda da, güzel özellik.

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

Bunun gibi bir çıktı verir:


Selam Dünya!

İşte bir bağlantı:

www.google.com

daha fazla basılı metin ...

Paragraf metni buraya ...


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.