iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
➕

Write Mathematical Equations Easily with VS Code and KaTeX

に公開
VS Code
math
math
katex
TeX
tech

TL;DR

Introduction

There are various environments for writing mathematical formulas. Among them, the style of using a library called KaTeX is currently popular. Zenn, the platform for this article, uses KaTeX. Additionally, editors such as Notion and Typora also support writing formulas using KaTeX.

In this article, I will introduce how to write formulas using VSCode, along with some useful extensions. Note that this article itself is being written in VSCode.

KaTeX

KaTeX is a library for rendering mathematical formulas in HTML or Markdown. By using this library, you can easily write formulas.

A similar library is MathJax. While MathJax renders formulas in the browser, KaTeX adopts SSR (Server-Side Rendering), which allows it to render formulas faster than MathJax.

For more details on this, please refer to the official KaTeX website.

| KaTeX : The fastest math typing 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.

Due to these characteristics, it has been adopted by document-sharing services like Notion and Zenn. However, editor support for writing KaTeX is not yet sufficient. For example, Zenn has issues such as syntax highlighting not being available. While Notion does support syntax highlighting, its formula input field is small and difficult to use.

To address these issues, I will show you how to write KaTeX using VSCode.

Writing KaTeX in VSCode

The reasons for using VSCode as an editor are the following three points:

  • Syntax highlighting is available
  • You can display the preview screen and the editor screen simultaneously
  • A rich set of extensions

To write KaTeX in VSCode, you use an extension. By installing the following extension, you can write KaTeX in VSCode:

  • Markdown KaTeX

  • The syntax is simple: you can write formulas just by enclosing them in $. Also, by enclosing them in $$, you can center-align the formulas.

  • Having syntax highlighting is also a helpful feature. Specifically, it looks like this:

Having syntax highlighting when writing formulas via CLI, not just for KaTeX, improves readability, making this feature very beneficial.

Also, the ability to display the preview screen and the editor screen at the same time is a convenient feature. This allows you to write formulas while checking the preview in real-time.

Below is the screen from when I wrote the formulas introduced at the beginning. You can see how you can work while viewing both the preview and the editor simultaneously.

Extensions

By setting up the environment described so far, you have reached the point where you can at least write KaTeX. In addition, by adding extensions, you can write KaTeX even more comfortably.

Tokyo Hack

I use Tokyo Hack as a theme extension for VSCode. Themes are a matter of preference, so using other themes is not an issue, but it is good to choose a theme that makes formulas easy to read when actually writing them.

It might be interesting to try out various themes such as Monokai or Molokai.

Vim

By default, VSCode does not allow using Vim-like keybindings. Therefore, I recommend installing the Vim extension plugin. This allows you to use Vim keybindings within VSCode.

Learning Vim keybindings involves some effort, but once you get used to them, your writing speed will increase, so please give it a try.

GitHub Copilot

Regardless of whether it's GitHub Copilot or another tool, having some form of AI code completion is very useful. Since you often find yourself writing similar patterns, you can improve your efficiency by delegating those tasks to an AI.

This is subjective, but in terms of code quality, I find GitHub Copilot to be the most superior. Developed by GitHub, it automatically generates code based on the context of your work. It's free for students, so I highly recommend giving it a try. (Working professionals, please pay for your usage!)

For professionals looking for a free alternative, I'll introduce Amazon CodeWhisperer. This AI provides both code generation and security checks. Since the code generation feature is completely free, it might be worth trying out if you're interested.

Conclusion

  • Using VSCode allows for simultaneous viewing of the preview and Markdown screens, as well as syntax highlighting, making KaTeX writing very comfortable.
  • Extensions can further enhance your KaTeX writing experience.
  • Please use this article as a reference to set up your own environment for writing KaTeX.
  • If you have any recommended extensions, please let me know in the comments!

Update Information

  • 2023.03.22: Fixed typos

Discussion