数式をSVG化するWebアプリの裏側

現在開発中の、LaTeXコードを即座にSVG画像に変換するツールについて、少し技術的な話をしたい。このツールの肝は、入力されたTeXコマンドをリアルタイムでパースする処理だ。

例えば、ユーザーが以下のような数式を入力したとする。

$\displaystyle \frac{\partial\rho}{\partial t} + \nabla\cdot(\rho \bold{u}) = 0$

これをWeb上でレンダリングするために、内部ではJavaScriptを用いてDOMを操作している。開発初期は苦労したが、以下のようなロジックで処理を安定させることができた。

// 数式レンダリングの簡易ロジック
function renderMath(texString) {
  try {
    const svg = generateSVG(texString);
    display(svg);
  } catch (e) {
    console.error("Parsing Error:", e);
  }
}

特にこだわったのは、ショートカットキーによる操作性だ。マウスを使わずに完結するUXを目指し、実装を重ねている。単純なツールだが、自分の研究活動には欠かせない存在となった。