Skip to content

Instantly share code, notes, and snippets.

@yarakos95
Last active July 20, 2021 12:23
Show Gist options
  • Save yarakos95/e554045b77d35bd132eb976034625023 to your computer and use it in GitHub Desktop.
Save yarakos95/e554045b77d35bd132eb976034625023 to your computer and use it in GitHub Desktop.
VSCode で編集してCloudLaTeX でタイプセットする

VSCode で編集してCloud LaTeX でタイプセットする

Cloud LaTeX を利用していない,もはや拡張機能をも導入していない人間がREADME を読んでちょっといい感じにまとめてみた記事です. なので,確実性に欠ける記事になっています.注意してください.

Cloud LaTeX | Build your own LaTeX environment, in seconds

Cloud LaTeX をVSCode と連携できる拡張機能を利用してコンパイルを可能にしたい.また,LaTeX Workshop からスニペットやインテリセンスを利用したい.

Cloud LaTeX - cloudlatex | Marktplace ver.1.0.0 (2020/07/20 現在)

LaTeX Workshop - James Yu | Marktplace ver.8.19.2 (2020/07/20 現在)

Cloud LaTeX 側の設定方法の詳細は以下のREADME を読むと分かりやすいだろう.

README - cloudlatex-vscode-extension | GitHub

README に加えて本記事ではLaTeX Workshop の設定に関しても付記しておきたい.

前提

いままでローカルに構築したTeX 環境を利用してタイプセットしていた. これを編集をローカルで,タイプセットをCloud LaTeX 上で行うようにしたい.

  • Windows
  • VSCode 導入済み
  • LaTeX Workshop を導入済み
  • Cloud LaTeX のアカウントを取得済み

LaTeX Workshop はVSCode でLaTeX を編集,ローカルでタイプセットする際に利用される拡張機能である.この拡張機能にはスニペット機能などの多くの編集支援機能が満載なので,これを併用していきたい.

LaTeX Workshop - James Yu | Marktplace

本来はローカルに構築されたTeX を実行するために構成されているため,いくつか変更を加えながら使用することにしたい.

本記事では,Cloud LaTeX でタイプセット出来るようにするのみを紹介する.また,ローカルにTeX 環境が整っていてもCloud LaTeX でタイプセットが出来るように設定していきたい.

設定の方針🧭

設定の方針は以下の3点になる.

  • 特定のフォルダないのみでしかCloud LaTeX の拡張機能を動作させない
  • LaTeX Workshop によるビルドコマンドを利用できないようにする
  • LaTeX Workshop によるLaTeX 編集サポートはスニペット,インテリセンス,PDF による閲覧に限る

ワークスペースの設定

コマンドパレットから Prefences: Open Settings(JSON) として開くグローバルのsettings.json で設定しない.

これらの設定はワークスペースの設定かフォルダの設定に記述する.

フォルダの設定はPrefences: Open Folder Settings(JSON)
ワークスペースの設定はPrefences: Open Workspace Settings(JSON) から開くことが出来る.

ここで言うワークスペースとはマルチルートワークスペースのことであり,フォルダを開くだけでは単一のフォルダを開くのみに限っているのに対して,マルチルートワークスペースでは複数のフォルダを同時に開くことが出来る.また,.code-workspace ファイルによってこのワークスペースを保存することが出来る.(フォルダのsettings.json は作業ディレクトリの.vscode フォルダに保存される)

詳細は以下の公式ページを参照するか他記事を探してほしい.

Multi-root Workspaces in Visual Studio Code

.code-workspace ファイルの管理が面倒に感じる場合はそれらを管理する拡張機能もある.以下の記事を参照してほしい.

Workspace in VSCode and managing - Gist

以下では,フォルダの設定であっても単にワークスペースの設定として紹介してく.

settings.json

グローバル設定では以下のような設定になっていると思われる.

// global: settings.json
{
    "[latex]": {
      "editor.wordWrap": "on",
      "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?.。,、()「」[]{}《》てにをはがのともへでや",
      "editor.suggestSelection": "recentlyUsedByPrefix",
      "editor.suggest.snippetsPreventQuickSuggestions": false,
      "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
      },
      "editor.scrollBeyondLastLine": false,
      "editor.padding.bottom": 250,
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
    },
  // LaTeX Workshop
    "latex-workshop.intellisense.package.enabled": true,
    "latex-workshop.intellisense.includegraphics.preview.enabled": true,
    "latex-workshop.intellisense.includegraphics.preview.pdf.enabled": false,
    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.view.pdf.backgroundColor": "#990000",
    "latex-workshop.view.pdf.trim": 1,
    "latex-workshop.view.pdf.zoom": "page-width",
  // Cloud LaTeX Extension for VSCode
    "cloudlatex.enabled": false,
    "cloudlatex.supressIcon": true,
}

今回,内部ビューワを利用したPDF 表示にしているが,もちろん"external" に変更して外部ビューワに変更しても問題ない.


ワークスペースの設定は以下のようにする.

"latex-workshop.latex.recipes" を空白にしておくことで,間違ってもローカルでタイプセットを実行しないようにしている.

また,"cloudlatex.projectId" は個別にそれぞれのID に変える必要がある.例として任意の数字を入れている.

// Workspace: settings.json
{
    "[latex]": {
      "editor.formatOnSave": false,
    },
  // LaTeX Workshop
    "latex-workshop.latex.autoBuild.run": "never",
    "latex-workshop.latex.outDir": "./.workspace",
    "latex-workshop.latex.recipes": [],
  // Cloud LaTeX Extension for VSCode
    "cloudlatex.enabled": true,
    "cloudlatex.supressIcon": false,
    "cloudlatex.projectId": 20210101,
    "cloudlatex.outDir": "./.workspace",
    "cloudlatex.autoCompile": false,
}

自動コンパイルを有効にしたい場合には"cloudlatex.autoCompile": true とすれば良い.

キーボードショートカット

上の設定では"cloudlatex.autoCompile"false としており,自動コンパイルを無効化している.したがって,コンパイルしたい場合にはコマンドを叩く必要がある.

コンパイルのためのキーボードショートカットを作成しておこう.keybindings.json はフォルダやワークスペースでは個別に設定できない仕様になっているため,これはLaTeX Workshop とは異なるキーボードショートカットを作成しておきたい.(もちろん,ローカルにLaTeX 環境を作成していない場合には上書きさせておくと良いだろう)

// keybindings.json
[
    {
        "key": "ctrl+shift+b",
        "command": "cloudlatex.compile",
        "when": "editorLangId == latex",
    },
]
Keybindings Description
Ctrl+Shift+B Cloud LaTeX でタイプセット
Ctrl+Alt+V タブビューワを開ける
もしもローカルにLaTeX 環境がない場合 (折りたたみ)

以下のようにしてビルドコマンドのキーボードショートカットを削除しておくと良いだろう.

// keybindings.json
[
    {
        "key": "ctrl+alt+b",
        "command": "-latex-workshop.build"
    },
    {
        "key": "ctrl+shift+b",
        "command": "cloudlatex.compile",
        "when": "editorLangId == latex",
    },
]

余談

ついに拡張機能のバージョンが1.0.0 になった!!!

VSCode で編集してCloudLaTeX でタイプセットする

Cloud LaTeX を利用していない,もはや拡張機能をも導入していない人間がREADME を読んでちょっといい感じにまとめてみた記事です. なので,確実性に欠ける記事になっています.注意してください.

いままでローカルに構築したTeX 環境を利用してタイプセットしていた. これを編集をローカルで,タイプセットをCloud LaTeX 上で行うようにしたい.

VSCode に以下の拡張機能を導入することで実現できる.

Cloud LaTeX | cloudlatex ver.0.1.0 (2020/01/01 現在)

  • Windows
  • VSCode 導入済み
  • LaTeX Workshop を導入済み
  • Cloud LaTeX のアカウントを取得済み

LaTeX Workshop はVSCode でLaTeX を編集,ローカルでタイプセットする際に利用される拡張機能である.この拡張機能にはスニペット機能などの多くの編集支援機能が満載なので,これを併用していきたい.

LaTeX Workshop | James Yu

本来はローカルに構築されたTeX を実行するために構成されているため,いくつか変更を加えながら使用することにしたい.

今回はCloud LaTeX を使ってタイプセットすることを念頭に設定を行うが,LaTeX Workshop の基本的な詳細については以下の記事に譲りたい.

LaTeX Workshop を使いこなす - Qiita

本記事では,Cloud LaTeX でタイプセット出来るようにするのみを紹介する.また,ローカルにTeX 環境が整っていてもCloud LaTeX でタイプセットが出来るように設定していきたい.

Cluod LaTeX から情報を得る

  1. プロジェクト一覧,右上のユーザ名からプラグイン連携 を選択.トークン生成ダイアログが表示されるので,アカウント情報を入力し,生成されるクライアントID, トークンを記録する
  2. プロジェクト一覧からプロジェクトを作成する
  3. 作成したプロジェクトのプロジェクトID をURL から読み取る
~~/projects/20210101/edit

となっている場合,プロジェクトID は20210101 である.以下では,プロジェクトID を20210101 として紹介する.

VSCode の設定

ユーザ設定にはグローバルな設定とワークスペースごとの設定の2つがある.これらを設定していきたい.

設定の方針🧭

Cloud LaTeX でタイプセットするワークスペース(プロジェクト)では,LaTeX Workshop で提供されるタイプセットコマンドを使用してはならない. したがって,他のワークスペースではLaTeX Workshop によるタイプセットを可能にしていても,Cloud LaTeX でタイプセットするワークスペースでは利用できないようにしておくと良いだろう.

Cloud LaTeX でタイプセットするワークスペースでのLaTeX Workshop は,スニペットとPDF ビューワとしての機能のみに終始させておく必要がある.

グローバルな設定

settings.json を以下のようにする.

{
    "[latex]": {
      "editor.wordWrap": "on",
      "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?.。,、()「」[]{}《》てにをはがのともへでや",
      "editor.suggestSelection": "recentlyUsedByPrefix",
      "editor.suggest.snippetsPreventQuickSuggestions": false,
      "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
      },
      "editor.scrollBeyondLastLine": false,
      "editor.padding.bottom": 250,
      "editor.tabSize": 2,
    },
  // LaTeX Workshop
    "latex-workshop.intellisense.package.enabled": true,
    "latex-workshop.intellisense.includegraphics.preview.enabled": true,
    "latex-workshop.intellisense.includegraphics.preview.pdf.enabled": false,
    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.view.pdf.backgroundColor": "#990000",
    "latex-workshop.view.pdf.trim": 1,
    "latex-workshop.view.pdf.zoom": "page-width",
  // Cloud LaTeX Extension for VSCode
    "cloudlatex.enabled": false,
    "cloudlatex.supressIcon": true,
}

これの他,多くあるLaTeX Workshop の設定は任意に含めても構わない. recipes やtools の設定を含めていないが,含めていても問題ない.

ここでは確実にCloud LaTeX 拡張機能が有効にならないように設定しておく.また,有効でない場合にはアクティビティバーにはCL アイコンが表示されないようにしている.

タブビューワの色彩反転やフィルターについては以下の記事を参照してほしい.

# タブを利用 - LaTeX Workshop を使いこなす - Qiita

ワークスペースの設定

PDF ファイルは"cloudlatex.outDir" で示したディレクトリにダウンロードされる.ここでダウンロードされたPDF を開くために"latex-workshop.latex.outDir" も同じディレクトリを指定する必要がある.

ここでは,開けているワークスペース内の.workspace フォルダ内にダウンロードされる.

ワークスペース内のsettings.json を以下のようにする.

{
    "[latex]": {
      "editor.formatOnSave": false,
    },
  // LaTeX Workshop
    "latex-workshop.latex.autoBuild.run": "never",
    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.latex.outDir": "./.workspace",
  // Cloud LaTeX Extension for VSCode
    "cloudlatex.enabled": true,
    "cloudlatex.projectId": 20210101,
    "cloudlatex.outDir": "./.workspace",
    "cloudlatex.autoCompile": false,
}

上書き保存をしたタイミングで自動タイプセットを行う方が良い場合には,"cloudlatex.autoCompile": true, とすると良いだろう.

また,ワークスペース内のkeybindings.json で以下のように設定しておこう.

[
    {
        "key": "ctrl+alt+b",
        "command": "cloudlatex.compile",
        "when": "editorLangId == latex",
    },
]

Cloud LaTeX でタイプセットする場合には,ローカルでタイプセットさせたくないので,Ctrl+Alt+B で行われるタイプセット1をCloud LaTeX でのタイプセットコマンドに書き変えておく. あるいは,~autoCompile:true としている場合には"command": "", に変更しておくことで無効化させておく.

間違ってタイプセットのキーボードショートカットを押下してしまっても,実行されないようにしておく.(自作で定義しているものも,ワークスペースでは使えないようにしておきたい)

キーボードショートカット

キーボードショートカット 効果
Ctrl+Alt+B Cloud LaTeX でタイプセット
Ctrl+Alt+V タブビューワを開ける

この他にもいくつかのコマンドが提供されているので,キーボードショートカットとして定義しておいても良いかもしれない.

メリット・デメリット等

メリット

  • TeX の環境構築が不要
  • LaTeX Workshop のスニペットや編集支援機能を利用できる
  • ローカルとサーバの2か所に保存される(自動同期)
  • リアルタイムプレビューが可能

LaTeX Workshop のスニペットなどは,以下の記事を参照してほしい.

LaTeX Workshop をもう少し使いこなす - Qiita

デメリット

  • タイプセットにはオンライン環境が必要
  • LaTeX Workshop のコマンド補完機能で,別ファイルで定義した自作コマンドを補完出来ない (LaTeX Workshop でタイプセットを実行していないため)
  • 最新のTeX Live を利用できない(それほど問題ではない?)

# build 環境 | help | Cloud LaTeX

疑問点

  • PDF ビューワに内部のタブビューワを使用しているが,SumatraPDF でも可能か
  • SyncTeX の利用
  • タイプセットコマンドの指定方法

参考

余談

気が向いたらCloud LaTeX のアカウント作成して,拡張機能を導入してやってみたいと思います.

おそらく今のバージョンから1年くらいすれば,今の設定ではよくないことになるかもしれない.

Footnotes

  1. LaTeX Workshop ではローカルでタイプセットするキーボードショートカットCtrl+Alt+B を提供している.

@yarakos95
Copy link
Author

追記 1

  • 自動同期なので,バックアップになってない可能性がある(push, pull をミスすると消える)
  • バージョン管理はやはり出来ていない
    • Git のようにバージョンを戻すことが出来ないので,Git 管理は別で行う必要がありそう
  • タイプセットコマンドはlatexmk が担っているのでどの形式でタイプセットしていても問題ではない(latexmk をいまだにちゃんと理解してないのでアレ)
  • Cloud LaTeX でSyncTeX の利用が.io でforward のみ可能になっているようだが,synctex ファイルをダウンロードされていなければ利用出来ない.どうだろう(実際にやってみないと分からない)

cf:
https://cloudlatex.io/announce_archive

  • 画像ファイル等はワークスペースのディレクトリ内にあれば挿入できるものと考えているけれど,合っているだろうか.相対パスでも可能なのだろうか.
    • ワークスペース外の画像ファイルはおそらく読み込めないだろう
  • VSCode 側からログイン出来たら楽なのになぁと思う

2021/01/08 追記

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment