Overview

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

Behavior

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

https://youtu.be/ZParCRUc5AY?si=-aHHi3bIZGWoJYnP

Preparation

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.

Repository

Sample code is stored at the following link.

https://github.com/nakamura196/tei-xml-xslt-vscode

Install xslt3 for performing the XSLT transformation.

git clone https://github.com/nakamura196/tei-xml-xslt-vscode
cd tei-xml-xslt-vscode
npm install

settings.json and tasks.json

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.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Transform XML with XSLT",
      "type": "shell",
      "command": "npx",
      "args": [
        "xslt3",
        "-xsl:xsl/make-CETEIcean.xsl",
        "-s:${file}",
        "-o:${fileDirname}/${fileBasenameNoExtension}.html"
      ],
      "presentation": {
        "reveal": "never",
        "close": true
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

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

https://github.com/TEIC/CETEIcean/blob/master/xslt/make-CETEIcean.xsl

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

{
  "triggerTaskOnSave.tasks": {
    "Transform XML with XSLT": ["tei/*.xml"]
  }
}

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

Sample File

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

<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="https://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
    <teiHeader>
        <fileDesc>
            <titleStmt>
                <title>CETEICean Demo</title>
                <author>Satoru Nakamura</author>
            </titleStmt>
            <publicationStmt>
                <p></p>
            </publicationStmt>
            <sourceDesc>
                <p></p>
            </sourceDesc>
        </fileDesc>
        <encodingDesc>
            <tagsDecl>
                <rendition scheme="css" xml:id="italic">font-style: italic;</rendition>
                <rendition scheme="css" selector="title">text-decoration: underline;</rendition>
                <rendition scheme="css" selector="persName">color: green;</rendition>
            </tagsDecl>
        </encodingDesc>
    </teiHeader>
    <text>
        <body>
            <div>
                <p>
                    <!--
                    <title xml:id="foo" xml:lang="de">Die Leiden des jungen Werther</title>
                    -->
                    <lb/>
                    <lb/>
                    ...
                </p>
            </div>
            <div>
                <p>
                    Please refer to <ref target="https://github.com/TEIC/CETEIcean">here</ref> for CETEIcean.
                </p>
                <p>
                    This is an example of <persName>person name</persName> markup.
                    This is the first text.
                </p>
                ...
            </div>
            ...
        </body>
    </text>
</TEI>

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.

Summary

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.