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?

Anton Tarasenko
quelle
@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
Hinzufügen von JavaScript: stackoverflow.com/questions/16852885/…
Anton Tarasenko

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

Harmon
quelle
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>

duhaime
quelle
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
1
Einfacher Proof of Concept unter gist.github.com/holdenweb/fb8de56e33cdfaef9218673915cc7f1c
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
Udi
quelle
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 ...


Joseph True
quelle