Wie binde ich HTML in die IPython-Ausgabe ein?


158

Ist es möglich, gerenderte HTML-Ausgaben in IPython-Ausgaben einzubetten?

Eine Möglichkeit ist zu verwenden

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

oder (IPython-Alias ​​für mehrzeilige Zellen)

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

Welche geben einen formatierten Link zurück, aber

  1. Dieser Link öffnet keinen Browser mit der Webseite selbst über die Konsole . IPython-Notebooks unterstützen jedoch ehrliches Rendern.
  2. Ich weiß nicht, wie HTML()ich ein Objekt beispielsweise in einer Liste oder einer pandasgedruckten Tabelle rendern soll . Sie können dies tun df.to_html(), ohne jedoch Verknüpfungen innerhalb von Zellen herzustellen.
  3. Diese Ausgabe ist in der PyCharm Python-Konsole nicht interaktiv (da es sich nicht um QT handelt).

Wie kann ich diese Mängel beheben und die IPython-Ausgabe etwas interaktiver gestalten?



@cel Es formatiert die HTML-Ausgabe genauso wie es HTML()tut, aber ich konnte die Punkte 1 und 2 immer noch nicht lösen.
— Anton Tarasenko

2
Ich bin kein Experte, daher könnte dies falsch sein, aber ich habe das Gefühl, dass das Einfügen von beliebigem HTML-Code in die Darstellung anderer Objekte nicht funktioniert. Dies würde Logik und Darstellung eines Objekts koppeln und ist wahrscheinlich nicht wünschenswert. Sie können jedoch sicher Wrapper-Objekte schreiben, die das ursprüngliche Objekt enthalten, und mithilfe der repr_html- Methode eine benutzerdefinierte HTML-Darstellung bereitstellen.
— Cel

Eigentlich habe ich gerade Ihren Code ausgeführt und es hat funktioniert, sobald Sie in eine andere Zelle
— gewechselt sind

Antworten:


252

Das scheint bei mir zu funktionieren:

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

Der Trick besteht darin, es auch in "Anzeige" zu verpacken.

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


2
Kann diese Version Javascirpt ausführen?
— Joshua Moore

4
Hier ist ein Link zu einem Beispielnotizbuch, das die Anzeigemöglichkeiten zeigt: Rich Output
— Romain

1
Der Anzeigeteil erlaubte mir, JavaScript in ein Notizbuch einzubetten
— lamecicle

Ist dies eine praktikable Methode zum Erstellen einer Website, wenn ich sie mit Dash erstellen muss und mein gesamter Python-Code in der Jupyter-IPynb-Datei enthalten ist?
— user8322222

Was ich damit gemeint habe ist, wenn ich eine Website erstellen muss, die ein Dashboard aus Dash und Flask enthält und mein gesamter Code in jupyter .ipynb-Dateien enthalten ist, kann ich einfach eine separate HTML- und CSS-Datei in Atom verwenden, um diesen Teil auszuführen und ihn zu verknüpfen Der Code in Jupyter-Dateien oder mein gesamter Code muss sich in einer .Ipynb-Datei befinden. Würde mich über jede Hilfe in diesem Punkt freuen, da ich neu in diesem Bereich bin.
— user8322222

34

Vor einiger Zeit haben Jupyter Notebooks begonnen, JavaScript aus HTML-Inhalten zu entfernen [ # 3118 ]. Hier sind zwei Lösungen:

Lokales HTML bereitstellen

Wenn Sie jetzt eine HTML-Seite mit JavaScript in Ihre Seite einbetten möchten, ist es am einfachsten, Ihre HTML-Datei mit Ihrem Notizbuch im Verzeichnis zu speichern und dann den HTML-Code wie folgt zu laden:

from IPython.display import IFrame

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

Remote-HTML bereitstellen

Wenn Sie eine gehostete Lösung bevorzugen, können Sie Ihre HTML-Seite in einen "Bucket" von Amazon Web Services in S3 hochladen, die Einstellungen in diesem Bucket so ändern , dass der Bucket eine statische Website hostet, und dann eine Iframe-Komponente in Ihrem Notizbuch verwenden:

from IPython.display import IFrame

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

Dadurch werden Ihre HTML-Inhalte und JavaScript in einem Iframe gerendert, genau wie auf jeder anderen Webseite:

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


1
Vielen Dank. Das habe ich gesucht. Ich benutze dies, um Plot-Diagramme interaktiv in meiner statischen Blog-Site zu rendern
— Okroshiashvili

Wäre eine lokale Datei nicht einfacher, als etwas auf AWS zu werfen?
— vy32

1
Dies ist perfekt! Genau das, was ich brauchte - weil ich eine ganze Webanwendung auf einem Jupyter Notebook von Amazon SageMaker hosten möchte. Vielen Dank!
— Adi Levin

2
Führen Sie für zusätzliche Markierungen einen interaktiven Webserver asynchron aus einer Zelle aus und interagieren Sie mit den Seiten, die er in einem iFrame in anderen Zellen erstellt!
— Holdenweb


13

Verwandte Themen: Beim def _repr_html_(self): ...Erstellen einer Klasse kann eine benutzerdefinierte HTML-Darstellung ihrer Instanzen erstellt werden:

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

o = Foo()
o

wird gerendert als:

Hallo Welt !

Weitere Informationen finden Sie in den IPython-Dokumenten .

Ein fortgeschrittenes Beispiel:

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

Wird rendern:

  1. ☐ Milch kaufen
  2. ☐ Hausaufgaben machen
  3. ☑ Spielen Sie Videospiele

9

Wenn Sie @Harmon oben erweitern, können Sie die Anweisungen displayund möglicherweise printbei Bedarf miteinander kombinieren . Oder vielleicht ist es einfacher, einfach Ihren gesamten HTML-Code als eine Zeichenfolge zu formatieren und dann die Anzeige zu verwenden. So oder so, nette Funktion.

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

Gibt ungefähr so ​​aus:


Hallo Welt!

Hier ist ein Link:

www.google.com

noch etwas gedruckter Text ...

Absatztext hier ...


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.