はじめに

この記事では、VSCodeにおいてノートブック（.ipynb 形式のファイル）内で、LaTeXコードを書く際、VSCodeのプレビューではうまく出力されていても、Jupyter Notebook上ではうまく表示できない場合があることを説明しています。

たとえば、編集中の.ipynb ファイルがgitで管理されたプロジェクトの一部である場合を考えてみます。ユーザーが.ipynbファイルをJupyter Notebookで閲覧することが期待される場合、VSCodeのプレビューでLaTeXコードが適切に表示されていると感じても、実際のJupyter Notebook上では、表示が異なる可能性があることに注意が必要です。

そのため、Jupyter Notebook（あるいは、Jupyter Lab）でも正しく表示されることを確認することが望ましいと考えられます。

1. 環境

VSCode
- 編集するファイル: .ipynbファイル
- 数式を入力するセル: markdown セル

ファイルのエディタとして、VSCode(Visual Studio Code)を用いるものとします。また、VSCodeでは次の拡張機能をインストールしているものとします。

1.1. 拡張機能（Jupyter）

VSCodeにインストールする拡張機能
- 名前: Jupyter
- ID: ms-toolsai.jupyter
- 説明: Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more.
- バージョン: 2024.3.1
- パブリッシャー: Microsoft
- VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

Jupyterのインストール画面

2. 具体例

次のLaTeXのコードはJupyterの拡張機能をインストールしたVSCodeのプレビューでは出力できますが、Jupyter Notebookではうまく出力されない例です。

`\footnotesize`（LaTeXの標準のフォントサイズ）

LaTeXのコード

\begin{align*}
& \text{\Huge{sample}} \\
& \text{\huge{sample}} \\
& \text{\LARGE{sample}} \\
& \text{\Large{sample}} \\
& \text{\large{sample}} \\
& \text{\normalsize{sample}} \\
& \text{\small{sample}} \\
& \text{\footnotesize{sample}} \\
& \text{\scriptsize{sample}} \\
& \text{\tiny{sample}}
\end{align*}

LaTeXの出力 (VSCodeでのプレビュー)

VSCodeでのプレビュー1

Jupyter Notebookでの出力結果

$Jupyter Notebookの出力(\footnotesizeのみうまく表示されない)$

Jupyter Notebookの出力(\footnotesizeのみうまく表示されない)

Jupyter Notebook では、\footnotesizeのみうまく表示されないことがわかります。それ以外のフォントサイズについては対応しています。

`\raisebox`と`\footnotesize`

LaTeXのコード

a\cdot b \quad = \overset{\raisebox{1.5ex}{\text{\footnotesize Step1. 各要素の積をとる}}}{\underbrace{{\overbrace{a_{1}b_{1}}+\overbrace{a_{2}b_{2}}+\overbrace{a_{3}b_{3}}}}_{\raisebox{-3.5ex}{\text{\footnotesize Step2. 各要素の積の総和をとる}}}}

LaTeXの出力 (VSCodeでのプレビュー)

VSCodeでのプレビュー2

Jupyter Notebookでの出力結果

$Jupyter Notebookでの出力結果 (\raisebox と \footnotesizeを組み合わせた例)$

Jupyter Notebookでの出力結果 (\raisebox と \footnotesizeを組み合わせた例)

Jupyter Notebook では、\raisebox と\footnotesize のコマンドが機能しないため、数式が正確に表示できません。

3. 対策

3.1. 複雑な表現は避ける

テキストの細かな装飾やフォントについて記述する場合、Jupyter Notebookのmarkdownではそのコマンドがサポートされていない場合があります。

複雑なLaTeXコードを書くのを避け、より簡潔なコマンドを使用することで、VSCodeのプレビューとJupyter Notebookでの表示の間に生じる可能性のある不一致を最小限に抑えることができます。

3.2. Jupyter Notebook（またはJupyter Lab）で表示する

編集した .ipynb ファイルをJupyter Notebookで適切に表示できるかを確認しましょう。Jupyter Notebookはセッションを立ち上げるまでに若干時間を要しますが、Jupyter Notebookの後任であるJupyter Labについては、関連する便利な拡張機能があるのでこれを最後に紹介します。

VSCodeの拡張機能である「 Jupyterlab-Browser」を使用すると、VSCodeで編集している .ipynb からワンクリックでJupyter Labのセッションを起動できます。

名前: Jupyterlab-Browser
ID: Vikasdubey0551.jupyterlab-browser
説明: A small extension to open any file in Jupyterlab or start Jupyterlab session in browser
バージョン: 0.0.23
パブリッシャー: Vikasdubey0551
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=Vikasdubey0551.jupyterlab-browser

Jupyterlab-Browserインストール画面

3.2.1 Jupyterlab-Browserの使い方

拡張機能をインストールします。
.ipynb ファイルを開くと、エディタの画面右上にノートブックマーク📓が表示されます。（下図の赤枠で示されているマークになります。）

Jupyterlab-Browserをインストールすると、画面右上にノートブックのマークが追加される

2.で示したノートブックのマークをクリックすると、ブラウザでJupyterlabが起動します。

Jupyterlabのスクリーンショット

参考

2章「具体例」で挙げたLaTeXのコードの一覧が格納されたNotebookファイル

mogobon/til/check_latex.ipynb: (githubへのリンク)

【VSCode】.ipynb 形式のファイルでLaTeXコードを書くときの注意点