Preview XML in VS Code

mindolianum 0
Viewed 60

I'm an Atom user, but I'm switching to Visual Studio Code. When editing XML in Atom I can preview how its HTML would look like according to the XSL file of the XML header (copied below). For that purpose, I use Atom Browser or Browser Plus packages, so I don't need to execute any task or generate an HTML file, just click on Preview.

I wonder if there's any way to do something similar in VSCode. Thanks.

<?xml version='1.0' encoding ='UTF-8' ?>
<?xml-stylesheet type='text/xsl' href='.../styles.xsl'?>
<!DOCTYPE TEI SYSTEM '.../dtd.dtd'>
atom-editor xslt xml visual-studio-code
1 Answers

The short answer is no, but you may still be able to achieve what you need - with a little effort.

Visual Studio Code does not have any built-in XSLT capability (there's an XSLT/XPath language extension but this lacks the preview feature you want). There are also no Visual Studio Code extensions that I know of that provide a general purpose 'HTML Preview' feature driven by XSLT.

You do however have the option to write your own WebView extension to preview XML in this way for a limited (due to security constraints) set of XSLT stylesheet modules. The XSLT would be maintained within the extension.

The CALS Table Viewer extension (that I maintain) may be useful as a 'template project' which you could modify to fit your needs. The extension uses the Saxon-JS XSLT 3.0 Processor.

There's quite a lot of boiler-plate code but, to start with, you would just need to substitute in your own (compiled) XSLT. Here's the JavaScript statement that returns the WebView HTML to give you an idea:

            return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <!--
                    Use a content security policy to only allow loading images from https or from our extension directory,
                    and only allow scripts that have a specific nonce.
                -->
                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; connect-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="${stylesResetUri}" rel="stylesheet">
                <link href="${stylesMainUri}" rel="stylesheet">
                <title>CALS Table Viewer</title>
            </head>
            <body>
                <div id="main"></div>
                <div id="end"></div>
                <script nonce="${nonce}">var saxonData = {'sef': ${JSON.stringify(this.sefURI)}}</script>
                <script nonce="${nonce}" src="${scriptSaxonUri}"></script>
                <script nonce="${nonce}" src="${scriptUri}"></script>
            </body>
            </html>`;
pgfearo0
Related