Question 136123 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Preview XML in VS Code

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'>
Tags:

2

Answers


  1. 0

    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>`;
    Login or Signup to reply.
  2. 0

    You could also use the tei-publisher-vscode extension, which includes a preview functionality (cmd-shift-a / ctrl-shift-a), using ODD and TEI Publisher to transform into html.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search