35
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

OthloTechAdvent Calendar 2019

Day 14

Docker+VSCodeで保存時に自動でコンパイルされるLatex環境を作る話

Last updated at Posted at 2019-12-13

概要

この記事は環境の設定が面倒なLatex環境作成をDocker+VSCodeでサクッと作っちゃおうという記事です.
Docker+VSCodeでLatex環境を作る話はネット上に先駆者の方々が書き残してくださった偉大な記事があるのですが,どれも私の環境とは少し違ったような気がしたので,書き残しておこうと思います.被っていたらごめんなさい.
また,間違い等あったらコメントなどでご指摘いただけると幸いです.

ezgif-6-12bb9e9336c8.gif

事前準備

以下の環境があることを前提に書いていきます.また,筆者の環境はmacOS Catalinaです.Windowsでの動作は確認していませんが,おそらく同様の設定で環境作成ができるかと思います.

  • Dockerが使えること
  • VSCodeが使えること

Step1 Dockerでイメージをダウンロード

面倒な日本語環境設定などがすでに行われているLatex環境のイメージをローカルに取得します.使用するイメージはこちらのものを使用します.
リポジトリのREADMEにもあるように,以下のコマンドでイメージをダウンロードします.


docker pull paperist/alpine-texlive-ja

これでLatexの環境が取得できたわけですが,現状ではいちいちコマンドを打たないといけないので,次にVSCodeの設定を行っていきます.

Step2 VSCodeの拡張(Latex Workshop)を取得

VSCodeの拡張で以下の拡張をインストールします.2019年12月13日現在,Latex Workshopで検索すると一番上に出てきます.
スクリーンショット 2019-12-13 22.42.45.png

Step3 VSCodeの設定(settings.jsonの編集)

settings.jsonの編集をしていきます.これはVSCodeを起動し,Command+,(Windowsの場合はおそらくCtrl+,)で編集することができます.このままですとおそらく任意のテキストを編集しづらいと思うので画面右上のアイコンをクリックしてくだい.
スクリーンショット 2019-12-13 22.49.07.png

ここに以下の設定を付け加えます.
(@CivFractal,@rsuoercell 様からのご指摘を反映しました.ありがとうございます.)

settings.json
{
  "latex-workshop.latex.recipes": [
    {
      "name": "compile",
      "tools": [
        "ptex2pdf"
      ]
    }
  ],
  "latex-workshop.latex.tools": [
    {
      "name": "ptex2pdf",
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-v",
        "%DIR%:/workdir",
        "paperist/alpine-texlive-ja",
        "ptex2pdf",
        "-l",
        "/workdir/%DOCFILE_EXT%"
      ]
    }
  ],
  "latex-workshop.latex.autoBuild.run": "onFileChange",
  "latex-workshop.view.pdf.viewer": "browser",
}

注意
Latex Workshopの2020/04/05の変更により,プレースホルダー%DIRが相対パスで展開されるようになりました.一方でdockerの-vオプションは相対パスの指定では動作しないため,上記の設定ではコンパイルエラーが発生します.今のところ良い解決策がわからないので,%DIRをTexファイルがあるディレクトリの絶対パスにハードコーディングして使用することをお勧めします.(@tokutatsu様,ご指摘ありがとうございます.)
"latex-workshop.docker.enabled": trueの設定を削除する必要があるようです.(@JoyM1K1様.ご指摘ありがとうございます.)

ざっくり説明すると,texファイルが保存されたことをトリガーにdockerを使用したコンパイルをしてくださいねっていう設定をしています.
付録として最後の方に今回の設定した値の説明を入れておきます.
設定は以上になります.これからはファイル保存時にコンパイルが本当に走るのかテストを行います.

Step4 コンパイルのテスト

適当なディレクトリを作成し,拡張子がtexのファイルを作成してVSCodeで開いてください.(筆者はmain.texという名前にしています)
そこに以下のLatexの簡単なテンプレートをコピーし,適当に編集をしてファイルを保存してみてください.

main.tex
\documentclass[a4paper]{jarticle}
\begin{document}
そろそろ書くの疲れてきた
\end{document}

同じディレクトリにPDFファイルが作成されていたら成功です.保存をトリガーにしてDockerのコマンドが走り,コンパイルがされています.

既存のPDFのビューアはファイルが開かれた後にファイルが変更された場合に,変更を自動で更新してくれる機能がないものがあります.そのため,Latex Workshopのビューアを開いて編集することをお勧めします.
ビューアは以下のアイコンから開けます.また,このビューアの種類はブラウザとVSCode上の2つから選択でき,付録に示すパラメータで設定できます.
スクリーンショット 2019-12-13 23.37.59.png

終わりに

Docker+VSCodeを使ってLatex環境を作るというよくある記事でしたが,記事を書くことが初めてだったので,文章に起こすのってこんなに大変なんだなーって思いながら書きました.
間違え等ありましたらご指摘いただけると嬉しいです.

付録

settings.jsonで設定したパラーメータ

各値の詳細はこちらを参照してください.

latex-workshop.latex.recipes

Latexファイルをビルドするときのレシピを記載します.今回の記事ではptex2pdfを使用しているのでtoolsの中身は要素が1つの配列ですが,複数入れることでその順番に実行することができます.

latex-workshop.latex.tools

recipesによって指定されたレシピに対応するコマンドを記載します.本記事では,ptex2pdfに対して,dockerを使用してptex2pdfを実行するコマンドを対応させています.
%DIR%%DOC%はLatex Workshopのプレースホルダーでこちらで確認できます.

latex-workshop.latex.autoBuild.run

ビルドを走らせるタイミングについての設定です.onFileChangeにすると依存関係のあるファイルに変更があった場合に自動でコンパイルが走ります.この設定に加えて,以下のVSCodeの自動保存の設定をしておくと便利だったり鬱陶しかったりします.(書いているTexファイルのサイズが大きくなるほど鬱陶しいと感じました.)

setting.json
{
    "files.autoSave": "onWindowChange",
}

latex-workshop.docker.enabled

dockerを使用する上で必要な設定のようです.

latex-workshop.view.pdf.viewer

ビューアを何で開くのか設定できます.概要のGIFではtabの設定値を開いた場合です.筆者はbrowserを使用しています.

35
33
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?