Real-Time Preview of TEI/XML Using VSCode and XSLT

Overview

I prototyped a real-time preview environment for TEI/XML using VSCode and XSLT, so this is a memo of the process.

An example of the operation is shown below. When you edit and save a TEI/XML file, the browser display is updated.

Install the following extensions:

When a TEI/XML file is saved, Trigger Task on Save executes the XSLT transformation, and the resulting HTML file is viewed with Live Server.

Sample code is stored at the following link.

Install xslt3 for performing the XSLT transformation.

The .vscode folder contains settings.json and tasks.json.

tasks.json is as follows. It sets up a task to perform XSLT using xsl/make-CETEIcean.xsl.

xsl/make-CETEIcean.xsl is the XSL file published by CETEIcean.

Next, settings.json. It executes the above task when saving XML files under the tei folder.

With these settings, an HTML file is created in the same folder when a TEI/XML file is saved.

An example TEI/XML file is shown below. The styles set in the rendition element are applied through xsl/make-CETEIcean.xsl.

The resulting HTML file converts TEI/XML elements like lb to HTML tei-lb elements, to which CSS and JS files are applied.

The result is displayed as shown below.

Changing the XSL file will change the preview display content.

For large files, the XSLT transformation may take some time, but I hope this serves as a helpful reference for building TEI/XML editing environments.