Comment intégrer du HTML dans la sortie IPython?


158

Est-il possible d'intégrer la sortie HTML rendue dans la sortie IPython?

Une façon est d'utiliser

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

ou (alias de cellule multiligne IPython)

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

Qui renvoient un lien formaté, mais

  1. Ce lien n'ouvre pas de navigateur avec la page Web elle-même à partir de la console . Les notebooks IPython prennent cependant en charge un rendu honnête.
  2. Je ne sais pas comment rendre un HTML()objet dans, par exemple, une liste ou un pandastableau imprimé. Vous pouvez le faire df.to_html(), mais sans créer de liens à l'intérieur des cellules.
  3. Cette sortie n'est pas interactive dans la console PyCharm Python (car ce n'est pas QT).

Comment puis-je surmonter ces lacunes et rendre la sortie IPython un peu plus interactive?



@cel Il formate la sortie html comme le HTML()fait, mais je ne pouvais toujours pas résoudre les éléments 1 et 2.
Anton Tarasenko

2
Je ne suis pas un expert, donc cela pourrait être faux, mais je pense que l'injection de code html arbitraire dans la représentation d'autres objets ne fonctionnera pas. Cela couplerait la logique et la représentation d'un objet et n'est probablement pas souhaitable. Mais vous pouvez certainement écrire des objets wrapper, contenant l'objet d'origine et utiliser la méthode repr_html pour fournir une représentation HTML personnalisée.
cel

En fait, je viens d'exécuter votre code et cela a fonctionné dès que je suis passé à une autre cellule ...
Goodword

Réponses:


253

Cela semble fonctionner pour moi:

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

L'astuce consiste également à l'envelopper dans "display".

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


2
Cette version peut-elle exeucte javascirpt?
Joshua Moore

4
Voici un lien vers un exemple de notebook montrant les possibilités d'affichage: Rich Output
Romain

1
La partie affichage m'a permis d'intégrer JavaScript dans un cahier
lamecicle

Est-ce une méthode réalisable pour produire un site Web si je dois le créer avec Dash et que tout mon code python est dans le fichier Jupyter .ipynb?
user8322222

Ce que je voulais dire, c'est que si je dois créer un site Web contenant un tableau de bord à partir de Dash and Flask et que tout mon code est dans des fichiers jupyter .ipynb, puis-je simplement utiliser des fichiers html et css séparés dans Atom pour faire cette partie et le lier à le code dans les fichiers Jupyter ou tout mon code doit-il être dans un fichier .Ipynb. J'apprécierais toute aide sur ce point car je suis nouveau dans ce domaine.
user8322222

34

Il y a quelque temps, Jupyter Notebooks a commencé à supprimer JavaScript du contenu HTML [ # 3118 ]. Voici deux solutions:

Diffuser du HTML local

Si vous souhaitez intégrer une page HTML avec JavaScript sur votre page maintenant, la chose la plus simple à faire est d'enregistrer votre fichier HTML dans le répertoire avec votre bloc-notes, puis de charger le HTML comme suit:

from IPython.display import IFrame

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

Servir du HTML distant

Si vous préférez une solution hébergée, vous pouvez télécharger votre page HTML dans un «compartiment» Amazon Web Services dans S3, modifier les paramètres de ce compartiment afin que le compartiment héberge un site Web statique, puis utiliser un composant Iframe dans votre bloc-notes:

from IPython.display import IFrame

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

Cela rendra votre contenu HTML et JavaScript dans un iframe, comme vous le pouvez sur n'importe quelle autre page Web:

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


1
Merci beaucoup. C'est ce que je cherchais. J'utilise ceci pour rendre des graphiques intrigants de manière interactive dans mon site de blog statique
Okroshiashvili

Un fichier local ne serait-il pas plus facile que de lancer quelque chose sur AWS?
vy32

1
C'est parfait! Exactement ce dont j'avais besoin - parce que je souhaite héberger une application Web entière sur un bloc-notes Jupyter d'Amazon SageMaker. Merci!
Adi Levin

2
Pour des marques supplémentaires, exécutez un serveur Web interactif de manière asynchrone à partir d'une cellule et interagissez avec les pages qu'il crée à l'intérieur d'un iFrame dans d'autres cellules!
holdenweb


13

Lié: Lors de la construction d'une classe, def _repr_html_(self): ...peut être utilisé pour créer une représentation HTML personnalisée de ses instances:

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

o = Foo()
o

sera rendu comme:

Bonjour tout le monde !

Pour plus d'informations, reportez-vous à la documentation d' IPython .

Un exemple avancé:

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

Rendra:

  1. ☐ Achetez du lait
  2. ☐ Faire ses devoirs
  3. ☑ Jouez à des jeux vidéo

9

En développant sur @Harmon ci-dessus, il semble que vous puissiez combiner les instructions displayet printensemble ... si vous en avez besoin. Ou peut-être est-il plus facile de simplement formater l'intégralité de votre HTML en une seule chaîne, puis d'utiliser l'affichage. Quoi qu'il en soit, fonctionnalité intéressante.

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

Produit quelque chose comme ceci:


Bonjour le monde!

Voici un lien:

www.google.com

un peu plus de texte imprimé ...

Texte du paragraphe ici ...


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.