Jupyter / JupyterLab 노트북에 목차를 추가하려면 어떻게해야합니까?


106

http://ipython.org/ipython-doc/stable/interactive/notebook.html 의 설명서에 따르면

다른 수준의 제목을 사용하여 전체적으로 계산 문서에 대한 개념적 구조를 제공 할 수 있습니다. 레벨 1 (최상위 레벨)에서 레벨 6 (문단)까지 6 개의 레벨을 사용할 수 있습니다. 나중에 목차 등을 구성하는 데 사용할 수 있습니다.

그러나 계층 적 제목을 사용하여 이러한 목차를 만드는 방법에 대한 지침은 어디에서도 찾을 수 없습니다. 이 작업을 수행하는 방법이 있습니까?

NB : ipython 노트북 제목이있는 경우 다른 종류의 탐색에도 관심이 있습니다. 예를 들어 각 섹션의 시작 부분을 빠르게 찾기 위해 제목에서 제목으로 앞뒤로 건너 뛰거나 전체 섹션의 내용을 숨 깁니다 (접기). 이것은 내 위시리스트이지만 모든 종류의 탐색이 흥미로울 것입니다. 감사!


모든 웹 페이지에서 작동하는 일반적인 솔루션은 아래 @Nikolay의 대답을 참조하십시오. 이것은 훌륭한 대답입니다.
ihightower

기존 Jupyter 노트북 솔루션을 보완하기 위해 아래 에 JupyterLab 지침을 추가 했습니다 .
joelostblom

답변:


52

노트북의 목차를 구성 하는 ipython nbextension 이 있습니다. 섹션 접기가 아닌 탐색 만 제공하는 것 같습니다.


감사합니다. 이것이 문서가 언급 한 것이라고 가정합니다.
user2428107 2014 년

2
jupyter 4에 설치하려는 사용자 에게이 게시물 이 도움 될 수 있습니다.
Syrtis 주요

9
이것을 업데이트하기 위해 : 이제 nbextensions 확장이 있는데, 이것은 많은 확장을 함께 묶고 jupyter 자체를 통해 관리 할 수있게합니다. 이제 ToC2를 얻는 가장 쉬운 방법이라고 생각합니다. 그리고 섹션 접기와 같은 기타 관련 확장을 제공합니다. 그것은에서의 github.com/ipython-contrib/jupyter_contrib_nbextensions
user2428107

93

Markdown 및 HTML을 사용하여 TOC를 수동으로 추가 할 수 있습니다. 내가 추가 한 방법은 다음과 같습니다.

Jupyter Notebook 상단에 TOC를 만듭니다.

## TOC:
* [First Bullet Header](#first-bullet)
* [Second Bullet Header](#second-bullet)

본문 전체에 html 앵커 추가 :

## First Bullet Header <a class="anchor" id="first-bullet"></a>

code blocks...

## Second Bullet Header <a class="anchor" id="second-bullet"></a>

code blocks...

최선의 방법은 아니지만 작동합니다. 도움이 되었기를 바랍니다.


15
이것은 더 이상 나를 위해 작동하지 않지만 유사한 접근 방식이 작동 합니다.
joelostblom

2
또한 이와 동일한 "유사한 접근 방식": stackoverflow.com/questions/5319754/… tl; dr : <a name="pookie"></a>앵커 및 링크 사용 :Take me to [pookie](#pookie)
michael

2
마크 다운의 모든 제목에 대해 노트북은 자동으로 앵커를 추가합니다. 마우스를 가져갈 때 표시되는 제목 오른쪽에있는 필 크로 (¶)를 클릭하여 브라우저 주소 표시 줄에 앵커를 표시 할 수 있습니다. 마크 다운 섹션에 수동으로 앵커를 추가하는 대신이 앵커를 사용할 수 있습니다. 또한 가장 좋은 점은 세포간에 작동한다는 것입니다.
aaruja

1
내용 목록이있는 맨 위에 마크 다운 셀을 추가하는 스크립트 add_toc.py 가 있습니다. 확장 기능을 설치하지 않으려는 경우 가난한 사람의 솔루션입니다.
user2148414


18

모든 HTML 페이지의 개요를 제공하는 브라우저 플러그인을 사용하는 것은 어떻습니까? 나는 다음을 시도했다 :

둘 다 IPython 노트북에서 잘 작동합니다. 나는 이전 솔루션이 약간 불안정 해 보이며 결국 이러한 확장을 사용하기 때문에 사용을 꺼려했습니다.


1
매우 유용합니다! 그러나 일부 내장 함수는 특히 마크 다운과의 조합에서 매우 의미가있을 것입니다
dmeu

13

최근에 jupyter-navbar 라는 이름의 Jupyter에 대한 작은 확장을 만들었습니다 . 마크 다운 셀에 쓰여진 헤더를 검색하고 계층 구조로 사이드 바에 링크를 표시합니다. 사이드 바는 크기를 조정하고 접을 수 있습니다. 아래 스크린 샷을 참조하십시오.

설치가 쉽고 노트북이 열릴 때마다 실행되는 '사용자 지정'JS 및 CSS 코드를 활용하므로 수동으로 실행할 필요가 없습니다.

여기에 이미지 설명 입력


1
실제로 설치가 쉽고 소스 코드도 친숙합니다. 좋은 프로젝트!
Carson

13

이제 Jupyter 확장을 처리하는 데 사용할 수있는 두 개의 패키지가 있습니다.

  1. 목차 를 포함하여 확장 프로그램을 설치하는 jupyter_contrib_nbextensions

  2. 사용할 nbextension 을 구성하기위한 그래픽 사용자 인터페이스 (모든 노트북에 대해 자동로드)를 제공하고 nbextensions의 옵션을 구성하는 컨트롤을 제공하는 jupyter_nbextensions_configurator입니다.

최신 정보:

의 최신 버전부터는 해당 확장 프로그램과 함께 설치 되므로 jupyter_contrib_nbextensions최소한 conda설치할 필요가 없습니다 jupyter_nbextensions_configurator.


10

JupyterLab ToC 지침

이 질문에 대한 좋은 답변은 이미 많이 있지만 JupyterLab의 노트북에서 제대로 작동하려면 종종 조정이 필요합니다. JupyterLab에서 작업하고 내보내는 동안 노트북에 ToC를 포함하는 가능한 방법을 자세히 설명하기 위해이 답변을 작성했습니다.

사이드 패널로

jupyterlab-TOC의 확장 CAN 번호 제목, 축소 부, 그리고 (데모 GIF 아래 참조)를 탐색 할 수있는 측면 패널로 TOC를 추가한다. 다음 명령으로 설치

jupyter labextension install @jupyterlab/toc

여기에 이미지 설명 입력


노트북에서 셀로

현재 Matt Dancho의 답변 에서처럼 수동으로 수행하거나 클래식 노트북 인터페이스 의 toc2 jupyter 노트북 확장 을 통해 자동으로 수행 할 수 있습니다 .

먼저 jupyter_contrib_nbextensions 번들의 일부로 toc2를 설치 합니다 .

conda install -c conda-forge jupyter_contrib_nbextensions

그런 다음 JupyterLab을 시작하고로 이동 Help --> Launch Classic Notebook하여 ToC를 추가 할 노트북을 엽니 다. 도구 모음에서 toc2 기호를 클릭하여 부동 ToC 창을 표시하고 (찾을 수없는 경우 아래 gif 참조) 기어 아이콘을 클릭하고 "노트북 ToC 셀 추가"확인란을 선택합니다. 노트북을 저장하면 JupyterLab에서 열 때 ToC 셀이 표시됩니다. 삽입 된 셀은 html이 포함 된 마크 다운 셀이며 자동으로 업데이트되지 않습니다.

toc2의 기본 옵션은 클래식 노트북 시작 페이지의 "Nbextensions"탭에서 구성 할 수 있습니다. 예를 들어 제목에 번호를 매기고 ToC를 사이드 바로 고정하도록 선택할 수 있습니다 (개인적으로는 더 깔끔해 보입니다).

여기에 이미지 설명 입력


내 보낸 HTML 파일에서

nbconvert내 보낸 HTML을 형식화하는 방법에 대한 규칙에 따라 노트북을 HTML로 내보내는 데 사용할 수 있습니다. toc2상술 한 확장이라는 내보내기 형식 추가 html_toc로 직접적으로 사용될 수 있으며, nbconvert(애프터 커맨드 라인으로부터 toc2연장 설치 한 일) :

jupyter nbconvert file.ipynb --to html_toc
# Append `--ExtractOutputPreprocessor.enabled=False`
# to get a single html file instead of a separate directory for images

셸 명령은 앞에 느낌표를 붙여 노트북 셀에 추가 할 수 있으므로 노트북 !의 마지막 셀에이 줄을 붙일 수 있으며 "모든 셀 실행"을 누를 때 생성 된 ToC가 포함 된 HTML 파일을 항상 가질 수 있습니다 ( 또는 원하는 출력 nbconvert). 이렇게하면 jupyterlab-toc작업하는 동안 노트북을 탐색하는 데 사용할 수 있으며, 클래식 노트북 인터페이스를 사용하지 않고도 내 보낸 출력에서 ​​ToC를 얻을 수 있습니다 (우리 중 순수 주의자 용).

위에서 설명한대로 기본 toc2 옵션을 구성해도 의 형식은 변경 되지 않습니다nbconver --to html_toc . 메타 데이터를 .ipynb 파일에 기록하려면 클래식 노트북 인터페이스에서 노트북을 열어야합니다 (nbconvert는 내보낼 때 메타 데이터를 읽음). 또는 JupyterLab 사이드 바의 노트북 도구 탭을 통해 메타 데이터를 수동으로 추가 할 수 있습니다. 처럼:

    "toc": {
        "number_sections": false,
        "sideBar": true
    }

GUI 기반 접근 방식을 선호하는 경우 클래식 노트북을 열고 클릭 할 수 있어야합니다 File --> Save as HTML (with ToC) (이 메뉴 항목은 사용할 수 없음).


위의 gif는 확장의 각 문서에서 링크되었습니다.


로 작업하는 것을 선호 jupyter lab하지만 큰 노트북 HTML 출력에 목차를 추가해야했습니다. 이것은 완벽하게 작동합니다! 작동하기위한 몇 가지 추가 단계가 있습니다. 1. TOC2를 활성화합니다. 예를 들어 conda install -c conda-forge jupyter_nbextensions_configurator으로 이동하여 http://localhost:8888/nbextensions"호환성"을 선택 취소하고 "Toc2"를 활성화합니다 . 2. Classical Notebbok을 실행하고 필요에 따라 TOC 설정을 수정 한 Add TOC to Cell다음 설명 된대로 진행합니다. 3. 열고 .ipynb파일과 검색 "toc", JSON 목차 CONFIGS을 복사의 메타 데이터를 사용하여 도구 탭에 추가 Jupyter 실험실
알렉스

6

소개

@Ian과 @Sergey가 언급했듯이 nbextensions 는 간단한 솔루션입니다. 그들의 대답을 자세히 설명하기 위해 여기에 몇 가지 추가 정보가 있습니다.

nbextensions는 무엇입니까?

nbextensions에는 Jupyter 노트북에 기능을 추가하는 확장 프로그램 모음이 포함되어 있습니다.

예를 들어, 몇 가지 확장을 인용하기 위해 :

  • 목차

  • 접을 수있는 제목

nbextensions 설치

Conda 또는 PIP를 통해 설치할 수 있습니다.

# If conda:
conda install -c conda-forge jupyter_contrib_nbextensions
# or with pip:
pip install jupyter_contrib_nbextensions

js 및 css 파일 복사

nbextensions의 javascript 및 css 파일을 jupyter 서버의 검색 디렉토리에 복사하려면 다음을 수행하십시오.

jupyter contrib nbextension install --user

확장 기능 전환

터미널에 익숙하지 않은 경우 nbextensions configurator를 설치하는 것이 좋습니다 (다음 섹션 참조).

선택한 확장을 활성화 / 비활성화 할 수 있습니다. 문서에서 언급했듯이 일반 명령은 다음과 같습니다.

jupyter nbextension enable <nbextension require path>

구체적으로 ToC (목차) 확장을 사용하려면 다음을 수행하십시오.

jupyter nbextension enable toc2/main

구성 인터페이스 설치 (선택 사항이지만 유용함)

설명서에서 알 수 있듯이 nbextensions_configuratornbextensions에 대한 구성 인터페이스를 제공합니다.

다음과 같이 보입니다. nbextensions 구성자

conda를 사용하는 경우 설치하려면 :

conda install -c conda-forge jupyter_nbextensions_configurator

Conda가 없거나 Conda를 통해 설치하지 않으려면 다음 두 단계를 수행하십시오.

pip install jupyter_nbextensions_configurator
jupyter nbextensions_configurator enable --user

이것은 훌륭하고 상세한 답변입니다. 활성화 toc2/mainlocalhost : 8888 / tree # nbextensions_configurator에서 "Table of Contents (2)"를 확인하는 것과 동일 하다고 생각 합니다.
flow2k

4

내 접근 방식은 github 에서 사용할 수 있습니다 .

첫 번째 노트북 셀인 가져 오기 셀을 넣으십시오.

from IPythonTOC import IPythonTOC

toc = IPythonTOC()

가져 오기 셀 뒤 어딘가에 genTOCEntry 셀을 넣지 만 아직 실행하지는 마십시오.

''' if you called toc.genTOCMarkdownCell before running this cell, 
the title has been set in the class '''

print toc.genTOCEntry()

genTOCEntry 셀 아래에서 TOC 셀을 마크 다운 셀로 만듭니다.

<a id='TOC'></a>

#TOC

노트북이 개발되면 새 섹션을 시작하기 전에이 genTOCMarkdownCell을 넣으십시오.

with open('TOCMarkdownCell.txt', 'w') as outfile:

    outfile.write(toc.genTOCMarkdownCell('Introduction'))

!cat TOCMarkdownCell.txt

!rm TOCMarkdownCell.txt

새 섹션을 시작하려는 노트북의 지점으로 genTOCMarkdownCell을 아래로 이동하고 genTOCMarkdownCell에 대한 인수를 새 섹션의 문자열 제목으로 만든 다음 실행합니다. 바로 뒤에 마크 ​​다운 셀을 추가하고 genTOCMarkdownCell의 출력을 새 섹션을 시작하는 마크 다운 셀에 복사하십시오. 그런 다음 노트북 상단 근처의 genTOCEntry 셀로 이동하여 실행합니다. 예를 들어, 위와 같이 genTOCMarkdownCell에 대한 인수를 만들고 실행하면 다음 출력을 가져와 새로 인덱싱 된 섹션의 첫 번째 마크 다운 셀에 붙여 넣습니다.

<a id='Introduction'></a>

###Introduction

그런 다음 노트북 상단으로 이동하여 genTocEntry를 실행하면 출력이 표시됩니다.

[Introduction](#Introduction)

이 링크 문자열을 복사하여 다음과 같이 TOC 마크 다운 셀에 붙여 넣습니다.

<a id='TOC'></a>

#TOC

[Introduction](#Introduction)

TOC 셀을 편집하여 링크 문자열을 삽입 한 다음 Shift-Enter를 누르면 새 섹션에 대한 링크가 노트북 목차에 웹 링크로 표시되고 클릭하면 브라우저가 새 섹션에 배치됩니다.

내가 자주 잊는 한 가지는 TOC에서 한 줄을 클릭하면 브라우저가 해당 셀로 이동하지만 선택하지는 않는다는 것입니다. 목차 링크를 클릭했을 때 활성 상태였던 셀은 여전히 ​​활성 상태이므로 아래쪽 또는 위쪽 화살표 또는 Shift-Enter는 TOC 링크를 클릭하여 얻은 셀이 아니라 여전히 활성 셀을 나타냅니다.


2

Ian이 이미 지적했듯이 IPython Notebook에 대한 minrk의 목차 확장이 있습니다. 나는 그것을 작동시키는 데 약간의 어려움이 있었고 Windows에서 minrk의 목차 확장을위한 파일을 반자동으로 생성하는 이 IPython Notebook 을 만들었습니다 . 'curl'명령이나 링크를 사용하지 않지만 * .js 및 * .css 파일을 IPython Notebook-profile-directory에 직접 씁니다.

노트북에는 'What you need to do' 라는 섹션이 있습니다. 따라 가면 멋진 플로팅 목차가 있습니다.)

다음은 이미 표시된 html 버전입니다. http://htmlpreview.github.io/?https://github.com/ahambi/140824-TOC/blob/master/A%20floating%20table%20of%20contents.htm

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