VSCodeとXSLTを用いたTEI/XMLのリアルタイムプレビュー

概要

VSCodeとXSLTを用いたTEI/XMLのリアルタイムプレビュー環境を試作したので、備忘録です。

動作例は以下です。TEI/XMLファイルを編集し、保存すると、ブラウザの表示内容が更新されます。

以下の拡張機能をインストールします。

TEI/XMLを保存した際に、Trigger Task on SaveによってXSLTを実行し、変換されたHTMLファイルをLive Serverで閲覧します。

サンプルコードを以下に格納しています。

XSLTを行うにあたり、xslt3をインストールします。

.vscodeフォルダに、settings.jsonとtasks.jsonを格納しています。

tasks.jsonは以下です。xsl/make-CETEIcean.xslを用いて、XSLTを行うタスクを設定しています。

xsl/make-CETEIcean.xslは、CETEIceanで公開されているXSLファイルです。

次に、settings.jsonです。teiフォルダ以下のxmlファイルに対して、保存時に上記のタスクを実行します。

これらの設定により、TEI/XMLファイルを保存時に、同フォルダにHTMLファイルが作成されます。

TEI/XMLファイルの例は以下です。xsl/make-CETEIcean.xslにより、rendition要素で設定したスタイルが適用されます。

変換結果のHTMLファイルは以下です。TEI/XMLのlb要素などが、HTMLのtei-lb要素に変換され、これに対して、cssファイルやjsファイルが適用されます。

結果、以下のように表示されます。

XSLファイルを変更することで、プレビューの表示内容が変更されます。

大きなファイルでは、XSLTに時間がかかってしまうかもしれませんが、TEI/XMLの編集環境の構築にあたり、参考になりましたら幸いです。