Configurable XML Viewer

Suppose that you have an XML file that you wish to examine in detail. You can load that into a browser, and even collapse and expand nodes at will. Here is an XSLT stylesheet that can be used to do something similar, but with custom highlighting.

As an example, suppose that you have an HTML file <example_page.html>. Add the stylesheet processing instruction line

<?xml-stylesheet type="text/xsl" href="xml_enh_ind.xsl" ?>

and optionally rename the file to example_page.html.xml>:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="xml_enh_ind.xsl" ?>
<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <h1>Example Page</h1>
  <p>
   <span>before empty element</span>
   <span></span>
   <span>after empty element</span>
  </p>
  <table style="border-collapse:collapse;" border="1"><tbody>
   <tr>
    <dt>a</dt>
    <dt>b</dt>
   </tr><tr>
    <dt>c</dt>
    <dt>d</dt>
   </tr>
  </tbody></table>
 </body>
</html>

When viewed with the XSLT stylesheet and the associated format file set up to highlight certain table elements, the result looks like this:

cut-down of screen grab

cut-down of screen grab

Here, I’ve attached some files. As WordPress.com does not allow plain text files to be added, I’ve added them as <*.doc> files containing plain text. To used them, download them and then remove the <.doc> extension.

The main XSLT stylesheet file:

<xml_enh_ind.xsl>
(save this as xml_enh_ind.xsl)

Note that this contains a reference to the format file, which should be edited as required:

<xsl:param name="formatfile" select="'xml_ehn_format_html.xml'"/>

Then, here is an example format file:

<xml_ehn_format_html.xml>
(save this as xml_ehn_format_html.xml)

Advertisements

5 Responses to “Configurable XML Viewer”

  1. Rob Says:

    2012/05/17: update – I’ve fixed the links to the files

  2. urHelper Says:

    try it ! http://codebeautify.org/
    its online xml editor with many other functionality….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: