Làm cách nào để nhúng HTML vào đầu ra IPython?


158

Có thể nhúng đầu ra HTML được kết xuất vào đầu ra IPython không?

Một cách là sử dụng

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

hoặc (bí danh tế bào đa dòng IPython)

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

Trả về một liên kết được định dạng, nhưng

  1. Liên kết này không mở trình duyệt với chính trang web từ bảng điều khiển . IPython máy tính xách tay hỗ trợ kết xuất trung thực, mặc dù.
  2. Tôi không biết làm thế nào để hiển thị HTML()đối tượng bên trong, giả sử, một danh sách hoặc pandasbảng in. Bạn có thể làm df.to_html(), nhưng không tạo liên kết bên trong các ô.
  3. Đầu ra này không tương tác trong bảng điều khiển PyCharm Python (vì nó không phải là QT).

Làm cách nào tôi có thể khắc phục những thiếu sót này và làm cho đầu ra IPython tương tác hơn một chút?


2
Đây có phải là những gì bạn muốn làm? ipython.org/ipython-doc/dev/config/integrating.html
cel

@cel Nó định dạng đầu ra html giống như HTML()vậy, nhưng tôi vẫn không thể giải các mục 1 và 2.
Anton Tarasenko

2
Tôi không phải là một chuyên gia, vì vậy điều này có thể sai, nhưng tôi cảm thấy rằng việc tiêm mã html tùy ý vào việc thể hiện các đối tượng khác sẽ không hiệu quả. Điều này sẽ kết hợp logic và đại diện của một đối tượng và có lẽ là không mong muốn. Nhưng bạn chắc chắn có thể viết các đối tượng trình bao bọc, có chứa đối tượng gốc và sử dụng phương thức repr_html để cung cấp một biểu diễn html tùy chỉnh.
cel

Trên thực tế, tôi chỉ chạy mã của bạn và nó hoạt động ngay khi chuyển sang một ô khác ...
Goodword

Câu trả lời:


252

Điều này dường như làm việc cho tôi:

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

Bí quyết là cũng bọc nó trong "màn hình".

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


2
Phiên bản này có thể exeucte javascirpt?
Joshua Moore

4
Dưới đây là liên kết đến một sổ ghi chép mẫu hiển thị các khả năng hiển thị: Đầu ra phong phú
Romain

1
Phần hiển thị cho phép tôi nhúng JavaScript vào sổ ghi chép
lamecicle

Đây có phải là một phương pháp khả thi để sản xuất một trang web nếu tôi cần tạo nó bằng Dash và tất cả mã python của tôi nằm trong tệp Jupyter .ipynb?
dùng8322222

Ý tôi là nếu tôi cần tạo một trang web chứa bảng điều khiển được tạo từ Dash và Flask và tất cả mã của tôi nằm trong các tệp jupyter .ipynb, tôi có thể chỉ sử dụng các tệp html và css riêng biệt trong Atom để thực hiện phần đó và liên kết nó với mã trong các tệp Jupyter hoặc tất cả mã của tôi cần phải nằm trong tệp .Ipynb. Sẽ đánh giá cao bất kỳ trợ giúp về điểm này vì tôi mới biết điều này.
dùng8322222

34

Cách đây một thời gian, Notebook Jupyter đã bắt đầu tước JavaScript khỏi nội dung HTML [ # 3118 ]. Đây là hai giải pháp:

Phục vụ HTML cục bộ

Nếu bạn muốn nhúng một trang HTML với JavaScript trên trang của mình ngay bây giờ, cách dễ nhất là lưu tệp HTML của bạn vào thư mục với sổ ghi chép của bạn và sau đó tải HTML như sau:

from IPython.display import IFrame

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

Phục vụ HTML từ xa

Nếu bạn thích một giải pháp được lưu trữ, bạn có thể tải trang HTML của mình lên "nhóm" Dịch vụ web Amazon trong S3, thay đổi cài đặt trên nhóm đó để biến nhóm lưu trữ thành một trang web tĩnh, sau đó sử dụng thành phần Iframe trong sổ ghi chép của bạn:

from IPython.display import IFrame

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

Điều này sẽ hiển thị nội dung HTML và JavaScript của bạn trong iframe, giống như bạn có thể làm trên bất kỳ trang web nào khác:

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


1
Cảm ơn rất nhiều. Đó là những gì tôi đang tìm kiếm. Tôi sử dụng điều này để hiển thị các biểu đồ tương tác trong trang blog tĩnh của mình
Okroshiashvili

Không phải một tệp cục bộ sẽ dễ dàng hơn việc ném một cái gì đó lên AWS?
vy32

1
Đây là hoàn hảo! Chính xác những gì tôi cần - bởi vì tôi muốn lưu trữ toàn bộ ứng dụng web trên Notebook Jupyter từ Amazon SageMaker. Cảm ơn!
Adi Levin

2
Để có thêm dấu, hãy chạy một máy chủ web tương tác không đồng bộ từ một ô và tương tác với các trang mà nó tạo bên trong một iFrame trong các ô khác!
Holdenweb

1
Bằng chứng đơn giản về khái niệm tại gist.github.com/keepenweb/fb8de56e33cdfaef9218673915cc7f1c
Holdenweb

13

Liên quan: Trong khi xây dựng một lớp, def _repr_html_(self): ...có thể được sử dụng để tạo một biểu diễn HTML tùy chỉnh của các thể hiện của nó:

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

o = Foo()
o

sẽ hiển thị dưới dạng:

Xin chào thế giới !

Để biết thêm thông tin tham khảo tài liệu của IPython .

Một ví dụ nâng cao:

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

Sẽ kết xuất:

  1. Mua sữa
  2. Làm bài tập về nhà
  3. Chơi trò chơi điện tử

9

Mở rộng trên @Harmon ở trên, có vẻ như bạn có thể kết hợp các câu lệnh displayprintcâu lệnh với nhau ... nếu bạn cần. Hoặc, có thể dễ dàng hơn khi chỉ định dạng toàn bộ HTML của bạn thành một chuỗi và sau đó sử dụng hiển thị. Dù bằng cách nào, tính năng tốt đẹp.

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

Xuất ra một cái gì đó như thế này:


Chào thế giới!

Đây là một liên kết:

www.google.com

một số văn bản in thêm ...

Đoạn văn ở đây ...


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.