IPython 출력에 HTML을 포함시키는 방법?


158

렌더링 된 HTML 출력을 IPython 출력에 포함 할 수 있습니까?

한 가지 방법은

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

또는 (IPython 여러 줄 셀 별칭)

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

어떤 형식의 링크를 반환하지만

  1. 이 링크는 콘솔 에서 웹 페이지 자체가있는 브라우저를 열지 않습니다 . IPython 노트북은 정직한 렌더링을 지원합니다.
  2. HTML()목록이나 pandas인쇄 된 테이블 내에서 객체 를 렌더링하는 방법을 알지 못합니다 . df.to_html()셀 안에 링크를 만들지 않고도 할 수 있습니다 .
  3. 이 출력은 PyCharm Python 콘솔에서 대화식이 아닙니다 (QT가 아니기 때문에).

이러한 단점을 극복하고 IPython 출력을 좀 더 대화식으로 만들려면 어떻게해야합니까?


2
이것이 당신이하고 싶은 일입니까? ipython.org/ipython-doc/dev/config/integrating.html
cel

@cel 그것은 html 출력을 형식화 HTML()하지만, 여전히 항목 1과 2를 해결할 수 없었습니다.
Anton Tarasenko

2
나는 전문가가 아니기 때문에 이것이 잘못 될 수는 있지만 다른 객체의 표현에 임의의 HTML 코드를 삽입하는 것은 효과가 없다고 생각합니다. 이것은 객체의 논리와 표현을 결합하며 바람직하지 않을 것입니다. 그러나 원래 객체를 포함하고 repr_html 메소드를 사용하여 사용자 정의 HTML 표현을 제공하는 랩퍼 객체를 작성할 수 있습니다 .
cel

실제로, 나는 방금 코드를 실행했고 다른 셀로 이동하자마자 작동했습니다 ...
Goodword

답변:


252

이것은 나를 위해 작동하는 것 같습니다 :

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

트릭은 "디스플레이"로도 랩핑하는 것입니다.

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


2
이 버전으로 javascirpt를 실행할 수 있습니까?
Joshua Moore

4
다음은 디스플레이 가능성을 보여주는 노트북의 예입니다. Rich Output
Romain

1
디스플레이 부분은 노트북에 포함 된 자바 스크립트에 저를 허용
lamecicle

Dash로 웹 사이트를 만들어야하고 모든 파이썬 코드가 Jupyter .ipynb 파일에있는 경우 웹 사이트를 생성하는 데 적합한 방법입니까?
user8322222

내가 의미하는 것은 Dash and Flask로 만든 대시 보드가 포함 된 웹 사이트를 만들어야하고 모든 코드가 jupyter .ipynb 파일에있는 경우 Atom에서 별도의 html 및 CSS 파일을 사용하여 해당 부분을 수행하고 링크 할 수 있습니다 Jupyter 파일의 코드 또는 모든 코드가 .Ipynb 파일에 있어야합니다. 내가 이것을 처음 접했을 때이 점에 대한 도움을 주시면 감사하겠습니다.
user8322222

34

얼마 전 Jupyter Notebooks는 HTML 컨텐츠에서 JavaScript를 제거하기 시작했습니다 [ # 3118 ]. 다음은 두 가지 해결책입니다.

로컬 HTML 제공

지금 페이지에 JavaScript가 포함 된 HTML 페이지를 임베드하려면 가장 쉬운 방법은 노트북을 사용하여 HTML 파일을 디렉토리에 저장 한 후 다음과 같이 HTML을로드하는 것입니다.

from IPython.display import IFrame

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

원격 HTML 제공

호스팅 된 솔루션을 선호하는 경우 S3의 HTML 페이지를 Amazon Web Services "버킷"에 업로드 하고 해당 버킷의 설정을 변경 하여 버킷 호스트를 정적 웹 사이트로 만든 다음 노트북에서 Iframe 구성 요소를 사용할 수 있습니다.

from IPython.display import IFrame

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

그러면 다른 웹 페이지에서와 마찬가지로 HTML 내용과 JavaScript가 iframe으로 렌더링됩니다.

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


1
고마워 그것이 내가 찾던 것입니다. 나는 이것을 정적 블로그 사이트에서 대화식으로 도표로 표현하기 위해 사용한다
Okroshiashvili

로컬 파일이 AWS에서 무언가를 던지는 것보다 쉽지 않습니까?
vy32

1
이것은 완벽 해요! 정확히 필요한 것-Amazon SageMaker의 Jupyter Notebook에서 전체 웹 애플리케이션을 호스팅하려고하기 때문입니다. 감사!
Adi Levin

2
추가 표시를 위해 셀에서 대화식 웹 서버를 비동기식으로 실행하고 다른 셀의 iFrame 내에서 작성된 페이지와 상호 작용하십시오!
holdenweb


13

관련 : 클래스를 구성하는 동안 def _repr_html_(self): ...인스턴스의 사용자 정의 HTML 표현을 작성하는 데 사용할 수 있습니다.

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

o = Foo()
o

다음과 같이 렌더링됩니다.

안녕하세요 세계 !

자세한 내용은 IPython의 docs를 참조하십시오 .

고급 예 :

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

렌더링합니다 :

  1. ☐ 우유 구매
  2. ☐ 숙제를하십시오
  3. ☑ 비디오 게임

9

위의 @Harmon을 확장 하면 필요한 경우 displayprint문을 결합 할 수있는 것처럼 보입니다 . 또는 전체 HTML을 하나의 문자열로 형식화 한 다음 표시를 사용하는 것이 더 쉽습니다. 어느 쪽이든, 좋은 기능.

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

다음과 같이 출력합니다 :


안녕, 세상!

링크는 다음과 같습니다.

www.google.com

좀 더 인쇄 된 텍스트 ...

단락 텍스트는 여기에 ...


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.