vscode 拡張 Tinymist Typst の導入

vscode があれば拡張機能を導入するだけで Typst 環境が完成します。

vscode 上で Typst を快適に編集するための拡張機能Tinymist Typstを導入すると、構文ハイライトや補完機能が利用可能になります。 リアルタイムプレビュー機能もあり、Typst のドキュメントを編集しながら即座に結果を確認できます。

このようにとても編集しやすいのでぜひ導入しましょう

プレビュー画面の表示

vscode 上の右上にある虫眼鏡のついたプレビューアイコンをクリックすると現在のファイルのリアルタイムプレビュー画面が右側に表示されます。 プレビュー画面の文などの要素をクリックすると該当箇所のファイルの行へ移動でき、 ファイル内の要素をクリックするとプレビュー画面がその位置へスクロールします。

プレビュー画面の右上にある四角に右上矢印のアイコンをクリックするとプレビュー画面は外部ブラウザに表示されるようになります。 クリックでジャンプする機能はブラウザ上でもそのまま利用できます。

vscode から PDF を書き出す

書き出したい Typst ファイルを開いている状態で右上の PDF アイコンを押すと、その Typst ファイル名と同じ名前の PDF がエクスポートされます。

PDF を vscode 上で閲覧した場合は以下のvscode-pdf拡張機能を導入するとよいでしょう。