WSL2 上でインストールした LaTeX を VS Code で動かす

# 概要

[WSL2](https://learn.microsoft.com/ja-jp/windows/wsl/about) 上に [LaTeX](https://www.latex-project.org/) を導入し，[VS Code](https://code.visualstudio.com/) で編集できるようになるまでの手順をまとめました．

- 最終目標を達成するまでの所要時間：1時間
- 実行環境：Windows 11
- LaTeX のドキュメントクラス：platex, uplatex

なお，WSL2 の LaTeX は Windows よりも高速で動くようです

https://qiita.com/moinslut/items/97c29b2a003c7d5ffd8c

<br / >

WSL2 のインストール方法については以下の記事をご覧ください．

https://qiita.com/zakoken/items/61141df6aeae9e3f8e36

# 目次
1. [LaTeX のインストール](#1-latex-のインストール)
1. [VS Code 拡張機能のインストール](#2-vs-code-拡張機能のインストール)
1. [これからの流れ](#3-これからの流れ)
1. [作業1. latexmkrc の作成](#4-作業1latexmkrc-の作成)
1. [作業2. LaTeX Workshop の tool と reccipe の設定](#5-作業2latex-workshop-の-tool-と-reccipe-の設定)

# 1. LaTeX のインストール

Ubuntu を起動後，`sudo apt install texlive-full` と入力してインストールを開始します．

``` :Ubuntu
sudo apt install texlive-full
```

結構重いので，30分くらい掛かります．

# 2. VS Code 拡張機能のインストール

1. VS Code を開いて，次の二つの拡張機能をインストールします
    - Japanese Language Pack for Visual Studio Code
    - WSL
1. 一度 VS Code を閉じて，再度開きます (再起動)
1. 拡張機能の下にある「リモート エクスプローラー」をクリックします
    - テレビのようなマークです
    - 拡張機能 WSL をインストールしたことで表示されるようになります
1. Ubuntu を選択し，「現在のウィンドウで接続する」もしくは「新しいウィンドウで接続する」のどちらかを実行します![リモートエクスプローラー起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471691/f3aa0301-0ce4-6cfc-8511-70b9bbfa7e3a.png)
1. リモート接続できたら，その画面から次の拡張機能をインストールします
    - LaTeX Workshop
1. 拡張機能のインストールが完了したら，左下の「WSL: Ubuntu」をクリックして，「リモート接続を終了する」を実行してください
1. 以上で下準備が完了したので，VS Code を一度閉じてください

::: note warn
必ずリモート接続した状態で LaTeX Workshop をインストールしてください．
リモート接続していない場合としている場合では，VS Code の拡張機能が異なるので注意してください．
:::

# 3. これからの流れ

ここから先は基本的にコピペ作業になるので，先に全体の流れを確認しておきます．

そもそも最終目標は「VS Code 上で LaTeX ソースを PDF 化すること」です．
このために，必要な作業を次のように分割します．
1. LaTeX ソースから PDF を作成する操作を自動化する
1. 上の作業を VS Code 上で実現する

#### 作業１．LaTeX ソースから PDF を作成する操作を自動化する

五月雨式に重要事項を書きます．

- 通常，LaTeX ソースを PDF 化する流れは次の通りです
TeX ファイル > DVI ファイル > PDF ファイル  ( '>' はコンパイルを意味します)
- つまり，複数回のコンパイルが必要となります
- これを自動化してくれるコマンドが `latexmk` です
- `latexmk` の設定は `.latexmkrc` に書きます
- `.latexmkrc` にはビルドの方法やコンパイルオプションなどを書きます
- 利便性から `.latexmkrc` は `~/.latexmkrc` に置きます

従って，作業１では `.latexmkrc` を適切に設置することが目標となります．

::: note info
DVI (device-independent) ファイルには，整形された文書イメージがバイナリー形式で書かれます．これはマシンに非依存な形式として書かれるそうです．
:::

#### 作業２．作業１を VS Code 上で実現する

上記から，作業２では VS Code 上で `.latexmkrc` を実行するための環境整備を行います．
同じく，五月雨式に重要事項を書きます．
- LaTeX Workshop により `latexmk` が VS Code 上で適切に実行されます
- LaTeX Workshop では tool と recipe という概念で実行環境を制御します
- tool には実行コマンドを書き，recipe には 実際に使う tool の組み合わせを書きます
- tool と recipe には，それぞれ name と command という引数が用意されています
- tool の name には識別ラベルを，command には `latexmk` を書きます
識別ラベルは，upLaTex や LuaLaTeX などでコンパイル条件を変更する場合に役立ちます 
- recipe の name には「使う tool の name」を，commad には識別ラベルを書きます
この場合のラベルは，LaTeX Workshop で recipe を選択するのに使います
- LaTeX Workshop のデフォルト設定では，最初に書かれた recipe が適用されます
![LaTex-Workshop-Recipe-first.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471691/746bb2af-1d29-9003-a1cf-a6f944f0ce3f.png)

従って，作業２では LaTeX Workshop の tool と recipe を設定することが目標となります．

::: note info
使用する LaTeX 形式が一種類なら，tool と recipe に一つずつ登録すれば OK です．
私は upLaTeX 一筋の人間なので，これに該当します．
:::

# 4. 【作業1】latexmkrc の作成
1. Ubuntu を起動させます
1. `cd /home/ユーザー名` もしくは `cd ~` と入力して，作業用ディレクトリに移動します
1. `vim .latexmkrc` と入力し `.latexmkrc` を作成します
1. `i` と入力して，書き込みモードにします
1. 以下の `.latexmkrc` をコピペ後，`esc` を押し `:wq` を入力して終了します
1. 念のため，`cat .latexmkrc` で確認しましょう
 
 ``` :.latexmkrc
#!/usr/bin/env perl

$latex = 'uplatex -synctex=1 -interaction=nonstopmode -file-line-error %O %S';

$bibtex     = 'pbibtex %O %S';
$makeindex  = 'mendex %O %S';
$dvipdf     = 'dvipdfmx %O %S';
$pdf_mode   = 3;
$max_repeat = 5;

$pvc_view_file_via_temporary = 0;
$pdf_previewer = 'wsl-open %S'
 ```

#### 中身の説明
- 1行目の `#!/usr/bin/env perl` では，インタプリタを指定しています
    - `perl` とすることで，登録している PATH から自動で選択されるようになります
<br / >
- `$latex` で，LaTeX ソースから DVI ファイルを出力します
    - `uplatex` の部分には，`platex` か `uplatex` を書いてください
    その他の LaTeX エンジンの書き方は後述の参考文献を確認してください
    - `-` の付いた部分はコンパイルオプションで，ここでは以下を用意しました
        - `-synctex=1` : LaTeX の編集画面と PDF 画面の相互参照を有効にする
        - `-interaction=nonstopmode` : エラーが出てもコンパイルを中断せずに続ける
        - `-file-line-error` : エラー表示にファイル名と行番号を表示させる
    - `%O` にはその他のコンパイルオプションが代入されます
    - `%S` は入力ファイル名 (DVI ファイル) が代入されます
<br / >
- `$bibtex` は bibtex の設定で `pbibtex` を使用します
- `$makeindex` は index の設定で `mendex` を使用します
- `$dvipdf` で，DVI ファイルから PDF ファイルを出力します
- `$pdf_mode` で PDF の作成方法を指定します
    - 0: `$latex` により DVI のみを出力 (PDF は出力せず)
    - 1: `pdflatex` により DVI を経由せず PDF を作成
    - 2: `latex` により DVI を生成後，`$dvips` で PS を生成し `$ps2pdf` で PDF を作成
    - 3: `latex` により DVI を生成し，`$dvipdf` により PDF を作成
- `$max_repeat` でコンパイル回数の上限を指定します
<br / >
- `$pvc_view_file_via_temporary=0` で前回の出力ファイルに上書きするようにしています
    - デフォルトでは，古い出力ファイルが毎回保存され，一定数に達すると古いものから順に削除されていきます
- `$pdf_previewer = "wsl-open %S"` で PDF プレビュー を行うプログラムを指定しています
    - 本来の Linux なら `xdg-open` でファイルを開くため，`"xdg-open %S"` とします
    - 一方，WSL2 では `xdg-open` の代わりに，`wsl-open` を使用します
    - 後ほど，設定方法を紹介します

<br / >

`.latexmkrc` の作成には，以下の記事を参考にさせて頂きました．
upLaTeX や pLaTeX 以外の TeX エンジンを使う場合は適宜参照してください．

https://qiita.com/Rumisbern/items/d9de41823aa46d5f05a8

https://qiita.com/alpaca-honke/items/f30a2d04eedaa3c36a21#latexmk%E3%81%AE%E8%A8%AD%E5%AE%9A

https://qiita.com/rainbartown/items/d7718f12d71e688f3573


## 4-1. WSL2 を使って PDF や html を開くための準備

デフォルトの WSL2 では PDF や html を開くことが出来ません．
そこで，これらの実行環境を整備しておきましょう．

::: note info
VS Code では PDF ビューワーが付いているので，この機能は使いません
:::

以下の記事を参考にさせて頂きました．

https://neos21.net/blog/2020/09/06-02.html

1. Ubuntu を起動させます
1. `sudo apt install npm` を実行します (所要時間1分)
1. `sudo apt update` を実行します
1. `sudo npm install -g wsl-open` を実行します

これで準備が完了しました．
`wsl-open 開きたいファイル または 'リンク'` とすれば，Windows 側で登録しているブラウザが起動します．


## 4-2. WSL2 で LaTeX を動かしてみる

WSL2 を使って LaTeX が動くようになったはずなのでテストしてみましょう．

1. Ubuntu を起動させます
1. `cd /home/ユーザー名` もしくは `cd ~` で，作業用ディレクトリに移動します
1. `mkdir test` で test という名前のディレクトリを作成します
1. `cd test` で作成した test ディレクトリに移動します
1. `vim sample.tex` を実行して，sample という名前の TeX ソースを作成します
1. `i` を押して書き込みモードとし，以下の `upLaTeX template` をコピペします
1. `esc` を押し `:wq` を入力して保存しましょう
1. `latexmk sample.tex` を実行すると，コンパイルが自動で行われ，PDF が作成されます
1. 試しに `ls` を実行して確認しましょう >> `sample.pdf` がどこかにあれば成功です
1. `wsl-open sample.pdf` を実行すると，PDF が見られるはずです

``` tex:upLaTeX template
\documentclass[11pt,a4paper,uplatex]{jsarticle}
\begin{document}
\title{\LaTeX の書き方}
\author{名前}
\maketitle
\section{見出し}
見出し部分は勝手に番号が付きます．
\subsection{小見出し}
小見出しも同様です．数式は$E=mc^{2}$のように書くか
\begin{equation}
E=mc^{2}
\end{equation}
と書きます．
\end{document}
```

# 5. 【作業2】LaTeX Workshop の tool と reccipe の設定
1. VS Code を開いて，リモートエクスプローラーから Ubuntu を起動します
1. 拡張機能から LaTeX Workshop を探します
1. 管理 (⚙マーク) をクリックし，「拡張機能の設定」を選択します
1. 右上の「設定(JSON)を開く」(紙マーク) をクリックして，setting.json ファイルを開きます
1. 一番最後の `}` の前に以下 `latex_tool_recipe` をコピペしてください
※ インデントは一つ下に設定します
1. VS Code を再起動します

``` json:latex_tool_recipe
"latex-workshop.latex.tools": [
    { 
        "name": "latexmk-uplatex-tool",
        "command": "latexmk",
        "args": [
            "-outdir=%OUTDIR%",
            "%DOC%"
        ],
    },
],

"latex-workshop.latex.recipes": [
    {
        "name": "latexmk for uplatex",
        "tools": [
            "latexmk-uplatex-tool"
        ],
    },
],
```

::: note warn
setting.json ファイルに元々書いてあるものは消さないでください
:::

#### 中身の説明
- `tools` は `"name"` , `"command"` , `"args"` から構成されます
    - `"name"` : tool の名前 (任意に設定可)
    - `"command"` : コマンド `latexmk` を実行
    - `"args"` : 引数を指定
        - `"%DOC%"` : LaTeX ソースの PATH が代入される
        - `"-outdir=%OUTDIR%"` : LaTeX ソース と同じディレクトリに DVI と PDF の出力 
<br / >
- `recipes` は `"name"`, `"tools"` から構成されます
    - `"name"` : recipe の名前 (任意に設定可)
    - `"tools"` : 使う tools の名前を記述

## 5-1. 【ゴール】LaTeX を VS Code で編集する
以上で準備は全て整いました．試しに，先ほど作った sample.tex を編集してみます．
1. VS Code を開いて，リモートエクスプローラーから Ubuntu を起動します
1. 左上の「エクスプローラー」から「フォルダーを開く」を選択します
1. 先ほど作った test ディレクトリがあるはずなので，これを選択します
1. ディレクトリが開けたら，sample.tex をクリックして編集画面を開きます
1. 右上の「View LaTeX PDF file」ボタンをクリックすると，PDF が表示されます
1. 試しに，TeX ソースのどこかを編集して，`ctrl + s` を押してください
1. PDF が変更されれば OK です

なお，VS Code の LaTeX Workshop には，以下のコマンドが用意されています．
- `ctrl + s` : 保存 + コンパイル
- `ctrl + alt + v` : PDF ビューワーの起動
- PDF 上で `ctrl + クリック` : TeX ソースの該当箇所を表示
- TeX 上で `ctrl + alt + j` : PDF の該当箇所を表示

## 5-2. (おまけ) WSL2 の LaTeX にフォントを追加する

WSL2 は Windows に登録されたフォントを引用できないので，LaTeX でこだわりのフォントを使いたい場合はひと手間必要です．本記事の最後に，WSL2 の LaTeX で任意のフォントを使う方法を紹介します．

こちらの記事を参考にさせて頂きました．

https://qiita.com/aosho235/items/6dc59b0f3dba373f3564


#### 前提
- 使いたいフォントが Windows 側にインストールされている
::: note info
Windows に登録されているフォントの在処は `c/Windows/fonts` 以下です．
一方，WSL2 では `/usr/share/fonts/truetype` 以下となります．
:::

#### 方法
以下の例では `BIZ-UDMinchoM.ttc` というフォントを LaTeX に導入します．

1. Ubuntu を起動します
1. `fc-list 'BIZ-UDMinchoM.ttc'` を実行し，WSL2上にフォントがあるか確認します
※ 未登録な場合は応答がありません
1. 以下を実行し，Windows のフォントを WSL2 にコピーします
    ``` :Ubuntu
    sudo cp /mnt/c/Windows/fonts/BIZ-UDMinchoM.ttc /usr/share/fonts/truetype
    ```
1. LaTeX ソースのプリアンブルに `\usepackage[noalphabet]{pxchfon}` というパッケージを追加し，`\setminchofont[0]{BIZ-UDMinchoM.ttc}` を追加すれば OK です


``` tex:upLaTeX template
\documentclass[11pt,a4paper,uplatex]{jsarticle}

\usepackage[noalphabet]{pxchfon}
\setminchofont[0]{BIZ-UDMinchoM.ttc}

\begin{document}
\title{\LaTeX の書き方}
\author{名前}
\maketitle
\section{見出し}
見出し部分は勝手に番号が付きます．
\subsection{小見出し}
小見出しも同様です．数式は$E=mc^{2}$のように書くか
\begin{equation}
E=mc^{2}
\end{equation}
と書きます．
\end{document}
```

<br / >
# まとめ

WSL2 上にインストールされた LaTex を VS Code で編集できるようになるまでの手順をまとめました．編集する際は「リモートエクスプローラー」を忘れずに起動してくださいね．

また，WSL2 上に Python やFortran の実行環境を構築する方法をまとめた記事も書いておりますので，興味のある方はご覧ください．

https://qiita.com/zakoken/items/2a5e629020ce68f3efe1


https://qiita.com/zakoken/items/8ddfda7267e7d95b3c46


# 参考文献
- [(公式) WSL2](https://learn.microsoft.com/ja-jp/windows/wsl/about)
- [(公式) LaTeX](https://www.latex-project.org/)
- [(公式) Visual Studio Code](https://code.visualstudio.com/)
- [WSL2のLaTeXは速い (Qiita @moinslut)](https://qiita.com/moinslut/items/97c29b2a003c7d5ffd8c)
- [TEX Wiki LaTeX](https://texwiki.texjp.org/?LaTeX)
- [Latexmkから学ぶPDF化までの処理の流れ (Qiita @Rumisbern)](https://qiita.com/Rumisbern/items/d9de41823aa46d5f05a8)
- [VSCode で最高の LaTeX 環境を作る (Qiita @rainbartown)](https://qiita.com/rainbartown/items/d7718f12d71e688f3573)
- [VS CodeでLaTeX環境を構築する](https://obsica.com/latex-with-vscode/#fn:3)
- [[初心者]LaTeXのインストールから使い方までこれ一本！ (Qiita @alpaca-honke)](https://qiita.com/alpaca-honke/items/f30a2d04eedaa3c36a21#vscode%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [latexmkの設定](https://www2.yukawa.kyoto-u.ac.jp/~koudai.sugimoto/dokuwiki/doku.php?id=latex:latexmk%E3%81%AE%E8%A8%AD%E5%AE%9A)
- [wsl-open：WSL で xdg-open する (Neo's World)](https://neos21.net/blog/2020/09/06-02.html)
- [Linux フォント関連コマンドまとめ (Qiita @aosho235)](https://qiita.com/aosho235/items/6dc59b0f3dba373f3564)
- [WSL上のXサーバで、Windows 10にインストールされているフォントを利用する (Tech TIPS)](https://atmarkit.itmedia.co.jp/ait/articles/1812/27/news033.html)