如何在 HTML 代码标签中显示缩进的 XML

How can i display indented XML inside HTML code tag

提问by Bunny Rabbit

I want to display indented XML in a html page inside <code></code>I am getting the XML as from the javascript function

我想在里面的 html 页面中显示缩进的 XML<code></code>我从 javascript 函数中获取 XML

new XMLSerializer()).serializeToString(newXMLDoc)

new XMLSerializer()).serializeToString(newXMLDoc)

which gives me unintended XML String.

这给了我意外的 XML 字符串。

One way that I can think is doing this is using <ul>and <li>

我能想到的一种方法是使用<ul>和<li>

But is there a better way of doing this ?

但是有没有更好的方法来做到这一点？

Can XSLT help me in this case ( sorry I don't know much about XSLT).If yes where do I need to attach the XSLT style sheet , in the html document or in the xmlStringthat i am appending to the <code></code>tag.

在这种情况下，XSLT 可以帮助我吗（抱歉，我不太了解XSLT）。如果是，我需要在哪里附加 XSLT 样式表，在 html 文档中或在xmlString我附加到<code></code>标签的那个中。

Its only a client side app I can not do anything on the server side.

它只是一个客户端应用程序，我无法在服务器端做任何事情。

UPDATE: I am also replacing the < and > in the xmlString with <and >can i still use XSLT ?

更新：我还将 xmlString 中的 < 和 > 替换为<，>我仍然可以使用 XSLT 吗？

Even after applying the XSLT given by Dimitre Novatchev I am not getting the indented text,though I can see the XML getting indented while I apply the XSLT using SAXON parser kernow but when i am doing it in my javascript code I am getting the same unindented code.

即使在应用了 Dimitre Novatchev 给出的 XSLT 之后，我也没有得到缩进的文本，虽然我可以看到 XML 在我使用 SAXON 解析器 kernow 应用 XSLT 时缩进了但是当我在我的 javascript 代码中这样做时，我得到了同样的未缩进代码。

    //var xslt contains the XSLT provided by Dimitre Novatchev as string
    //var XMLDoc is the XMLDocument object to be transformed
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    newXMLDoc = xsltProcessor.transformToDocument(xml,document);
    //This is how I am converting the transformed XML to string 
    return (new XMLSerializer()).serializeToString(newXMLDoc)

采纳答案by Dimitre Novatchev

You can do this in two steps:

您可以分两步执行此操作：

First, just process the XML document with the identity transformationand with an <xsl:output indent="yes"/>instruction:

首先，只需使用身份转换和<xsl:output indent="yes"/>指令处理 XML 文档：

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

When applying this transformation on any XML document(e.g. this one):

在任何 XML 文档（例如这个）上应用此转换时：

<root><node/></root>

most XSLT processors(.NET XslCompiledTransform, Saxon 6.5.4 and Saxon 9.0.0.2, AltovaXML) produce the wanted result:

大多数 XSLT 处理器（.NET XslCompiledTransform、Saxon 6.5.4 和 Saxon 9.0.0.2、AltovaXML）产生想要的结果：

<root>
  <node />
</root>

The secondstep is to perform a string replace operation on the result so that any <character is replaced with the <string.

第二步骤是执行字符串替换该结果操作，使得任何<字符被替换为<字符串。

In case you want a fancier-formatted display, do have a look how the XPath Visualizerdoes this with XSLT.

如果您想要更高级的格式显示，请查看XPath Visualizer如何使用 XSLT 执行此操作。

回答by Saeed Neamati

I suggest that you use server-side code to do this, and send HTML formatted XML to your client. Yeah, XSLT can help you. But you should HTML encodeyour XML at server.

我建议您使用服务器端代码来执行此操作，并将 HTML 格式的 XML 发送到您的客户端。是的，XSLT 可以帮助您。但是您应该在服务器上对您的 XML 进行HTML 编码。

However, please note that if you are removing \nmarks (line feed characters) and other whitespace characters from your document (like spaces, tabs, etc.), then you need to search for something like client-side document formatter, or stuff like that. Writing such a thing is never an easy task.

但是，请注意，如果您\n要从文档中删除标记（换行符）和其他空白字符（如空格、制表符等），那么您需要搜索诸如client-side document formatter 之类的东西，或者类似的东西. 写这样的东西从来都不是一件容易的事。

Also you can use a syntax highlighterfor XML. One good example could be found here. Then you can simply use:

您也可以为 XML使用语法高亮器。一个很好的例子可以在这里找到。然后你可以简单地使用：

<pre class='brush: xml;'>
   // XML goes here.
</pre>