MathJax でレンダリングされた数式が hover に表示される機能

こういうやつです。

TeXstudioでも同様の機能があります。実装してから知りました。TeXstudioでは dvipng コマンドを使って実装されてますが、LaTeX Workshop では MathJax と MathJax-node を使って実装しています。VSCode の hover の内容には現在のところ Markdown しか指定できませんので、MathJax で SVG を生成して dataURL に変換して Markdown 中の画像として表示しています。キャッシュは使わず、毎回動的に画像を生成しています。

ユーザからの評判は良いようです。

デフォルトでは数式中にカーソルがある場合、カーソルもダブルダガーとして表示します。長い数式のどこを編集しているかを見失うことがよくあるので、それの対策として表示するようにしました。設定でオフにできます。

PDFビューアで横の margin を消す trim mode

こういうやつです。

TeXstudioでも同様の(もっとちゃんとした)機能があります。実装してから知りました。LaTeX Workshop の PDF ビューアは Mozilla の pdf.js と付属の viewer.js と viewer.html に SyncTeX などのために少し手を加える形で実装されています。これにさらに手を加えて trim mode を実装しました。各ページを少し拡大した上で CSS left プロパティを適当なマイナスの値に設定することで実現しています。あとその過程で LaTeX Workshop が依存する pdf.js を v1.x 系から最近リリースされたv2.0系の初の安定版 v2.0.943 にアップグレードしました(これ以前の v2.0.x は実は安定版ではなかったのです)。

この機能は自分で使っていても非常に便利だと感じます。

\ref や \eqref の hover に SyncTeX 用のリンクを表示する

こういうやつです。\refが参照している数式へ SyncTeX できます。下で説明するコマンドリンクを使って実装しています。

ちなみに\refが参照している数式をLaTeX文書ファイル側で見たい場合は、VSCode の Go to Definition や Peek Definition などの機能を使います。

入力ファイルが複数ある場合に対応してなかったのでこれから修正します。

\ref 上の hover に数式を表示する

こういうやつです。

\ref や \eqref が数式を参照している場合、MathJaxでレンダリングして表示します。そこそこ便利です。これも入力ファイルが複数ある場合に対応していません。時間があれば対応します。

SyncTeX コマンド相当の機能の実装

SyncTeX が同梱されていない MikTeX ユーザーから SyncTeX が動作しないという問い合わせが多いため、MikTeX ユーザーのために SyncTeX コマンドのバイナリを LaTeX Workshop に同梱しようという案が出ました。それはそれでサポートが大変そうなので、SyncTeX コマンド相当の機能を TypeScript で実装しました。検索してみると JavaScript で書かれた SyncTeX ファイルのパーサが公開されていたのでそれを使いました。探してみるもんですね。実装アルゴリズムはオリジナルのSyncTeXのものを再現せず適当に済ませてあります。PDFファイルからLaTeX文書ファイルへのジャンプの精度は要改善です。

VSCode 拡張作成 Tips

以下は上記の機能を実装中に知った VSCode 拡張作成 Tipsです。

ユーザが使用中のVSCodeテーマがダークかどうかを取得する

画像を動的に生成して表示する場合、ユーザが使用中の VSCode テーマがダークかどうかによって色を変える必要が出てきます。しかしながら現在ユーザが使用中のVSCodeテーマがダークであるかどうかを取得するAPIは提供されていません🤔。ユーザが使用中のテーマの名前自体はAPIから取得できるので、テーマ(と拡張機能)のインストールフォルダからテーマが記述されたの json ファイルを直接読むことで LaTeX Workshop ではこの問題を回避しています。これは LaTeX Workshop 作者の James Yu さんのアイディアです。 uiTheme プロパティの値が "vs", "vs-dark", "hc-black" のいずれであるかで判断するのが今のところ無難でしょうか。

コマンドリンク

ドキュメントにはさらっと書かれているだけですが、 isTrusted フラグが true である Markdown ドキュメントでは command をスキームとして持つコマンドリンクが利用可能です。 Markdown ドキュメント中の [link](commmand:commandName) をユーザがクリックするとコマンド commandName が実行されます。実際に呼び出されるのは vscode.registerCommand(commandName: string, callback) で commandName に登録した関数 callback です。 isTrusted フラグはデフォルトでは false ですので、明示的に true に指定した場合しかこの機能は有効になりません。commandName に引数を渡したい方法は、さらにどこにも書かれてないのですが、テストを見る限り

vscode.Uri.parse('command:commandName').with({ query: '123' })
vscode.Uri.parse('command:commandName').with({ query: JSON.stringify([123, true]) })

みたいに JSON 形式のシリアライズを使って書くようです。

LaTeX に関する質問

この記事を読まれている方は TeX や LaTeX に詳しい方が多そうですので質問です。LaTeX文書ファイルのパスやファイル名に%を含む場合 latex などの処理系が extended mode に入ってしまうのですがこれってどうやったら回避できるのでしょうか。

【追記】ありがとうございます。理解できました。

まとめ

Webにおける技術のコアのひとつは文字列を操作してどうブラウザ画面上に表示するかであり、その意味において JavaScript や node.js のエコシステムはエディタと非常に親和性が高いように思いました。あと TeXstudio すごい。

MathJax でレンダリングされた数式が hover に表示される機能

PDFビューアで横の margin を消す trim mode

\ref や \eqref の hover に SyncTeX 用のリンクを表示する

\ref 上の hover に数式を表示する

SyncTeX コマンド相当の機能の実装

VSCode 拡張作成 Tips

ユーザが使用中のVSCodeテーマがダークかどうかを取得する

コマンドリンク

ctrl + mouse click をショートカットとして登録する

hover の横幅の最大値を大きくする

ソースの構文情報を取得する

LaTeX に関する質問

まとめ