Jupyter / JupyterLabノートブックに目次を追加するにはどうすればよいですか?


105

http://ipython.org/ipython-doc/stable/interactive/notebook.htmlにあるドキュメントには、

さまざまなレベルの見出しを使用して、計算ドキュメント全体の概念構造を提供できます。レベル1(最上位)からレベル6(段落)までの6つのレベルがあります。これらは、目次の作成などに後で使用できます。

ただし、このような目次を作成するために階層見出しを使用する方法についての説明はどこにもありません。これを行う方法はありますか?

注:ipythonノートブックの見出しが存在する場合は、それを使用した他の種類のナビゲーションにも興味があります。たとえば、各セクションの開始をすばやく見つけるために見出しから見出しに前後にジャンプしたり、セクション全体のコンテンツを非表示(折りたたみ)したりできます。これは私のウィッシュリストですが、どんなナビゲーションにも興味があります。ありがとう!


すべてのWebページで機能する一般的なソリューションについては、以下の@Nikolayの回答を参照してください。これは素晴らしい回答です。
ihightower 2017年

既存のJupyterノートブックソリューションを補完するために、以下にJupyterLabの手順を追加しました。
joelostblom

回答:


52

ノートブックの目次を作成するipython nbextensionがあります。セクションの折りたたみではなく、ナビゲーションのみを提供するようです。


おかげで、私はこれがドキュメントが参照していたものだと思います。
user2428107 2014年

2
jupyter 4にインストールしたい人のために、この投稿が役立つかもしれません。
Syrtis Major

9
これを更新するだけです:nbextensions拡張機能が追加されました。これにより、多数の拡張機能がまとめられ、jupyter自体を介して管理できるようになります。ToC2を取得する最も簡単な方法だと思います。また、セクションの折りたたみなど、その他の関連する拡張機能も提供します。それはATのgithub.com/ipython-contrib/jupyter_contrib_nbextensions
user2428107

93

MarkdownおよびHTMLを使用して、目次を手動で追加できます。これが私が追加している方法です:

Jupyter Notebookの上部に目次を作成します。

## 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 2017年

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 Notebooksでかなりうまく機能します。以前のソリューションは少し不安定で、これらの拡張機能を使用することになったため、使用することに抵抗がありました。


1
非常に役立ちます!しかし、一部の組み込み関数は、特に
マークダウン

13

私は最近、jupyter-navbarという名前のJupyterの小さな拡張機能を作成しました。マークダウンセルに記述されたヘッダーを検索し、サイドバーにそれらへのリンクを階層的に表示します。サイドバーはサイズ変更と折りたたみが可能です。下のスクリーンショットを参照してください。

インストールは簡単で、ノートブックを開くたびに実行される「カスタム」JSおよびCSSコードを利用するため、手動で実行する必要はありません。

ここに画像の説明を入力してください


1
実際、インストールは簡単で、ソースコードもフレンドリーです。いいプロジェクトだ!
カーソン

13

Jupyter拡張機能の処理に使用できるパッケージが2つあります。

  1. 目次を含む拡張機能をインストールするjupyter_contrib_nbextensions

  2. jupyter_nbextensions_configuratorは、どのnbextensionsを有効にするか(すべてのノートブックに対して自動的にロードする)を構成するためのグラフィカルユーザーインターフェイスを提供し、nbextensionsのオプションを構成するためのコントロールを提供します。

更新:

最近のバージョンから jupyter_contrib_nbextensionsは、少なくともこれらの拡張機能とともにcondaインストールされるjupyter_nbextensions_configuratorため、インストールする必要はありません。


9

JupyterLab ToCの手順

この質問にはすでに多くの良い答えがありますが、JupyterLabでノートブックを適切に機能させるために微調整が必​​要になることがよくあります。この回答は、JupyterLabで作業し、JupyterLabからエクスポートするときに、ノートブックにToCを含める方法の詳細を説明するために書きました。

サイドパネルとして

jupyterlab-TOCの拡張は、CAN番号見出し、崩壊セクション、および(デモについては、以下のGIFを参照されたい)のナビゲーションのために使用されることがサイドパネルとして目次を追加します。次のコマンドでインストールします

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、を追加するノートブックを開きます。ツールバーの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出力にTOCを追加する必要がありました。これは問題なく動作します!それを機能させるためにいくつかの追加の手順がありました:1。例えばTOC2を有効conda install -c conda-forge jupyter_nbextensions_configuratorに行くhttp://localhost:8888/nbextensions、チェックを外し、「互換性」と「TOC2」有効2.起動クラシックNotebbokを、あなたのニーズにTOCの設定を変更し、Add TOC to Cell(説明に従っ)が。3..ipynbファイルを開いてを検索し、"toc"json toc設定をコピーして、Jupyterラボの
Alex

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設定プログラムをインストールすることをお勧めします(次のセクションを参照)。

選択した拡張機能を有効/無効にすることができます。ドキュメントに記載されているように、一般的なコマンドは次のとおりです。

jupyter nbextension enable <nbextension require path>

具体的には、ToC(目次)拡張を有効にするには、次のようにします。

jupyter nbextension enable toc2/main

インストール構成インターフェース(オプションですが便利です)

そのドキュメントが言うように、 nbextensions_configuratorはnbextensionsの構成インターフェースを提供します。

次のようになります。 nbextensionsコンフィギュレーター

condaを使用している場合にインストールするには:

conda install -c conda-forge jupyter_nbextensions_configurator

Condaがない場合、またはConda経由でインストールしたくない場合は、次の2つの手順を実行します。

pip install jupyter_nbextensions_configurator
jupyter nbextensions_configurator enable --user

これは素晴らしい詳細な答えです。有効にすることtoc2/mainは、localhost:8888 / tree#nbextensions_configuratorで「目次(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)

目次セルを編集してリンク文字列を挿入し、Shiftキーを押しながらEnterキーを押すと、新しいセクションへのリンクがノートブックの目次にWebリンクとして表示され、クリックすると、ブラウザーが新しいセクションに移動します。

よく忘れるのは、目次の行をクリックすると、ブラウザがそのセルにジャンプするが、選択されないことです。TOCリンクをクリックしたときにアクティブだったセルはすべてアクティブであるため、下向き矢印、上向き矢印、またはShiftキーを押しながらEnterキーを押すと、TOCリンクをクリックして取得したセルではなく、アクティブなセルが参照されます。


2

Ianがすでに指摘したように、IPython Notebookにはminrkによる目次拡張があります。私はそれを機能させるのにいくつかの問題を抱えており、Windowsでminrkの目次拡張用のファイルを半自動的に生成するこのIPython Notebookを作成しました。'curl'コマンドやリンクは使用しませんが、*。jsおよび* .cssファイルをIPython Notebook-profile-directoryに直接書き込みます。

ノートブックに「何をする必要があるか」というセクションがあります -それに従って、素晴らしいフローティング目次があります:)

これはすでに表示されている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.