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



# はじめに

この記事では、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のインストール画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/0e1ef007-2578-c6e4-48d5-d74ebea86f45.png)


Jupyterのインストール画面

# 2. 具体例

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

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

- 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でのプレビュー)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/0e0f86bc-6593-eb59-5aa8-3a6617ae80dc.png" width="355" alt="VSCodeでのプレビュー1">

_VSCodeでのプレビュー1_

- Jupyter Notebookでの出力結果

![Jupyter Notebookの出力(\footnotesizeのみうまく表示されない)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/ca742d14-5117-6d43-38d5-3ed55b618e25.png)

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

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

## `\raisebox`と`\footnotesize`

- LaTeXのコード

```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でのプレビュー)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/7f266d55-9b3f-c3ef-8ccc-7a2ecfbb0d8e.png">

_VSCodeでのプレビュー2_

Jupyter Notebookでの出力結果


![Jupyter Notebookでの出力結果 (\raisebox と \footnotesizeを組み合わせた例)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/60cf8151-6bde-79e8-3e73-d1954a8f0021.png)

_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インストール画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/e1fd0297-ae68-8b53-4af8-3940625714b4.png)


Jupyterlab-Browserインストール画面

### 3.2.1 Jupyterlab-Browserの使い方

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

![Jupyterlab-Browserをインストールすると、画面右上にノートブックのマークが追加される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/81377bb5-8b9d-c64c-59e5-254e20f1a8af.png)


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

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

![Jupyterlabのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2941544/65dff505-cdd7-bf1d-9645-32119e53171c.png)

_Jupyterlabのスクリーンショット_

# 参考

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

[mogobon/til/check_latex.ipynb: (githubへのリンク)](https://github.com/mogobon/til/blob/84f97d31e0b3664d2712895abeb7cdedf5356548/check_latex.ipynb)