Zenn
➕

VSCode+KaTeXで楽に数式を記述しよう

2023/07/23に公開
VS Code
math
math
katex
TeX
tech

TD;DR

はじめに

数式を記述するときには, いくつかの環境がある. その中でも, KaTeXというライブラリを用いて数式を記述するスタイルが流行している. 本記事の投稿先であるZennでは, KaTeXが採用されている. また, NotionやTyporaなどのエディタでもKaTeXを用いて数式を記述することができる.

今回はVSCodeを用いて数式を記述する方法を紹介する. また, その際に便利な拡張機能についても紹介する. なお, この記事はVSCodeで記述している.

KaTeX

KaTeXとは, 数式をHTMLやMarkdownで記述するためのライブラリである. このライブラリを用いることで, 数式を簡単に記述することができる.

同じようなライブラリにMathJaxがある. MathJaxはブラウザ上で数式をレンダリングするがKaTeXはSSRを採用しているため, MathJaxよりも高速に数式をレンダリングすることができる.

このあたりの話は, KaTeXの公式サイトにも書かれているので適宜参照されたい.

| KaTeX : The fastest math typeing library for the web

  • Fast: KaTeX renders its math synchronously and doesn’t need to reflow the page.
  • Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
  • Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
  • Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

上記のような性質から, NotionやZennなどの文章を共有するサービスでの採用実績がある. しかし, KaTeXを記述する際のエディタとしてのサポートはまだ十分とはいえない. 実際, Zennではシンタックスハイライトが効かないなどの課題がある. Notionはシンタックスハイライトが効くものの, 数式の記述欄が小さくて使いづらい.

これらの課題を解決するために, VSCodeを用いてKaTeXを記述する方法を紹介する.

VSCodeでKaTeXを記述する

エディタとしてVSCodeを用いる理由は, 以下の3点である.

  • シンタックスハイライトが効く
  • プレビュー画面と記述画面を同時に表示できる
  • 拡張機能が豊富

VSCodeでKaTeXを記述するには, 拡張機能を用いる. 以下の拡張機能をインストールすることで, VSCodeでKaTeXを記述することができる.

  • Markdown KaTeX

  • 書き方はシンプルで, $ で囲むだけで数式を記述することができる. また, $$ で囲むことで数式を中央揃えにすることができる.

  • シンタックスハイライトが効くこともありがたい機能である. 具体的には以下のようになる.

KaTeXに限らず数式をCLIで記述するときにシンタックスハイライトがあるだけで可読性が高まるので, この機能は非常にありがたい.

また, プレビュー画面と記述画面を同時に表示することができるのも便利な機能である. これにより, 数式を記述する際にプレビュー画面を見ながら記述することができる.

下記は冒頭で紹介した数式を記述する際の画面である. プレビュー画面と記述画面を同時に見ながら作業できることがわかる.

拡張機能

ここまでの環境を構築することで, 最低限, KaTeXを記述することができるようになった. これに加えて, 拡張機能を追加することにより, より快適にKaTeXを記述することができるようになる.

Tokyo Hack

VSCodeの拡張テーマとして筆者はTokyo Hackを使用している. テーマは好みの問題なので, 他のテーマを使用しても問題ないが, 数式を実際に記述するときに見やすいテーマにすると良い.

monokaiやmolokaiなど色々ためしてみると面白いだろう.

Vim

VSCodeではデフォルトではVimのようなキーバインドを使用することができない. そこで, Vimの拡張プラグインを導入する. これにより, VSCodeでVimのキーバインドを使用することができるようになる.

Vimのキーバインドを覚えるのは苦労を伴うが, 慣れると記述が速くなるので, ぜひ導入してみてほしい.

GitHub Copilot

GitHub Copilotに限らず, コードを補完するAIは何かしら入れておくと便利である. 同じような記述をすることは多いので, それをAIに任せることで, 作業効率を上げることができる.

これは主観だが, コードの品質で言えば, GitHub Copilotが最も優れていると感じている. これは, GitHubが開発したAIで, コードを記述する際に, そのコードの文脈からコードを自動生成してくれる. 学生であれば無料で使えるので, ぜひ導入してみてほしい. (社会人はお金を払って使いましょう)

無料で使いたいという社会人のためにもう一つ紹介すると, Amazon CodeWhispererというAIが存在する. こちらはコードの生成とセキュリティチェックができる. コード生成に関しては, 完全に無料なので興味のある人は入れてみると面白いだろう.

まとめ

  • VSCodeを用いるとプレビュー画面とmarkdown画面の同時視聴Aやシンタックスハイライトを使うことができ, 快適にKaTeXを記述することができる
  • 拡張機能を用いることで, より快適にKaTeXを記述することができる
  • ぜひ, この記事を参考にして, KaTeXを記述する環境を構築してみてほしい
  • また, おすすめの拡張機能があればぜひコメント欄で教えて欲しい

更新情報

  • 2023.03.22: 誤字を修正

Discussion