TeX と VS Code で遊んでみよう #VSCode

背景

Railsチュートリアルの本文は TeX で書かれていて、softcover という組版ツールを使って TeX ファイルから EPUB/PDF/HTML ファイルをそれぞれ生成しています。¹

TeX とは何か？どういうことができるのか、まず手元の環境で試してみたかったのでやってみました 🎶

環境を整える

前提条件

Mac を使用
VS Code はインストール済み
brew インストール済み

参考サイト: TEX Wiki - Visual Studio Code / LaTeX

1. LaTeX をインストールする

⚠️ とても時間がかかります...

console

$ brew cask install mactex-no-gui

ターミナル上で次のコマンドが使えることを確認

console

$ latex
$ uplatex
$ xelatex
$ latexmk

2. ビルドの設定用ファイルを作成

ホームディレクトリに .latexmkrc ファイルを作成し、以下を書きます。

.latexmkrc

if ($^O eq 'darwin') {
    $pvc_view_file_via_temporary = 0;
    $pdf_previewer               = 'open -ga /Applications/Skim.app';
 } else {
    $pdf_previewer               = 'xdg-open';
 }

一時ファイルの作成を抑止し、PDF ビュアーを Skim.app (macOS で推奨) に設定、なければ xdg-open (Linux 用)で開く設定。

3. VS Code に LaTeX Workshop をインストール

拡張機能検索 (⌘ shift x) から「LaTeX Workshop」をインストールします。

4. 日本語文書用に settings.json を設定

コマンドパレット (⌘ shift p) から、Settings (JSON)を開く。

( Default の方は読み込み専門で変更できないので選択しない。)

以下を追加します。

settings.json


"latex-workshop.latex.tools": [
  // Latexmk-upLaTeX を使用する場合
  {
      "name": "latexmk",
      "command": "latexmk",
      "args": [
       "-e",
       "$latex=q/uplatex %O -synctex=1 -interaction=nonstopmode -file-line-error %S/",
       "-e",
       "$bibtex=q/upbibtex %O %B/",
       "-e",
       "$biber=q/biber %O --bblencoding=utf8 -u -U --output_safechars %B/",
       "-e",
       "$makeindex=q/upmendex %O -o %D %S/",
       "-e",
       "$dvipdf=q/dvipdfmx %O -o %D %S/",
       "-norc",
       "-pdfdvi",
       "%DOC%"
      ]
    }
  // Latexmk-LuaLaTeX を使用する場合
  {
      "name": "latexmk",
      "command": "latexmk",
      "args": [
       "-e",
       "$lualatex=q/lualatex %O -synctex=1 -interaction=nonstopmode -file-line-error %S/",
     "-e",
       "$bibtex=q/upbibtex %O %B/",
       "-e",
       "$biber=q/biber %O --bblencoding=utf8 -u -U --output_safechars %B/",
       "-e",
       "$makeindex=q/upmendex %O -o %D %S/",
       "-norc",
       "-pdflua",
       "%DOC%"
       ]
   }
],

// 今開いているエディタを左右に分割し、右側に生成されたPDFを表示
"latex-workshop.view.pdf.viewer": "tab",

// .tex ファイルの保存と同時に自動的にビルドを実行しない
"latex-workshop.latex.autoBuild.run": "never",

TeX ファイルを作成・表示する

参考: LaTeX入門 / レポート

以下のサンプルファイルを変更しながらタグの意味を理解していきました。

sample.tex

\documentclass{jsarticle}
\begin{document}

\title{タイトル}
\author{作者}
\maketitle

\section{はじめに}

この文書は，ごく基本的なレポートや論文の例を示すものです。
実際にこのソースを入力してタイプセット（コンパイル）し，
タイトル，著者名，本文，見出し，箇条書きがどのように表示されるかを
確認してみましょう。

\section{見出し}

この文書の先頭にはタイトル，著者名，日付が出力されています。
特定の日付を指定することもできます。

そして，セクションの見出しが出力されています。
セクションの番号は自動的に付きます。

\section{箇条書き}

以下は箇条書きの例です。これは番号を振らない箇条書きです。

\begin{itemize}
  \item ちゃお
  \item りぼん
  \item なかよし
\end{itemize}

これは番号を振る箇条書きです。

\begin{enumerate}
  \item 富士
  \item 鷹
  \item なすび
\end{enumerate}

\section{おわりに}

これは一段組の例ですが，二段組に変更することもできます。

解説文を読んで，このソースをいろいろと変更してみましょう。

\end{document}

ファイルを作成したら、サイドバーの「TEX」からビルドします。

このとき! Class jsarticle Error: You are running upLaTeX. というエラーが出たので、こちらを参考に一番最初の行を\documentclass[uplatex]{jsarticle}としたら、直りました。

ビルドが出来たら、ファイル右上の虫眼鏡マークで PDF 表示することができます😊

LaTeX - コマンド一覧などを見て、色々試して遊んでみてください 🎶

HTML 上で CSS を付ける場合は、TeXコマンドとHTMLタグの比較も参考になります。

応用

TeX に直接 CSS を当てることができる longfbox package
TeX に Font Awesome アイコンを入れられる fontawesome package

ちなみにRailsガイドの電子書籍化では、技術書典などでも広く使われている Re:VIEW が使われています。Railsチュートリアルは英語版が softcover + Tex で書かれているため、なるべく原著の組版環境に合わせています。 ↩