Question

我开发了一个小型门户网站，它将从数据库表中提取XML文档并将其显示给用户。

我已经使用vkbeatify.js打印了XML文档，但是我现在也希望将XML文档设置为将XML标记表示为与XML值不同的颜色。

如何实现这一目标？

XML文档可以有不同的结构。

道歉，如果这是一个重复的问题，我看了一下，无法在这里找到合适的解决方案。

提前致谢。

编辑：

目前XML文档显示在textarea中，但我愿意将其更改为更合适的内容，如果它允许格式化和适当地着色XML文档。

Answer 1

只要知道您的XML模式，就可以使用XSLT将XML转换为HTML。

MSDN XSLT

如果您需要向用户显示XML结构本身，这将不是一个很好的解决方案，但您可以使用html / css以任何方式对所有内容进行颜色编码。

编辑：

因为你正在谴责＆＃34;美化＆＃34;在textarea中的xml，它只是文本。您无法像页面上的元素那样定位单个节点。即使您能够向节点添加类，也会导致类名在textarea中呈现。与此类似：<thing style="background-color:blue;">而不是呈现为蓝色。

Answer 2

prismjs适用于语法高亮XML标记。

如何实现这一目标？

有几种方法可以实现。以下是您可以考虑的几种方法：

示例1

方法：使用File Highlight插件获取XML文件：

获得必要的Prism Javascript和CSS：

访问downloads页面。
选择缩小版。
从语言部分选择标记。
选择主题。
从插件部分选择文件突出显示 - （如果需要，还包括行号插件）。
下载 JavaScript 和 CSS 文件。

<强> HTML

将生成的文件（来自上面的第6步）链接到您打算用来呈现.html的{{1}}页面，如下所示：

.xml

<link rel="stylesheet" type="text/css" href="my/path/to/prism.css" />

然后使用<script src="my/path/to/prism.js"></script>标记和.xml属性链接到.html的外部<pre>，如下所示：

data-src

根据需要修改<pre data-src="my/path/to/foobar.xml"></pre>，向用户显示突出显示.css的语法。

示例2

如果由于XMLHttpRequest文件提取文件突出显示插件的性质，上面的示例是一个问题。另一种方法，虽然更复杂，但是：

方法：内联转义XML到.html页面

此处还需要示例1中的步骤1-6，但是，不需要包含文件突出显示插件。
同样，生成的文件（来自上面的第6步）将需要链接到您打算用来呈现.xml的.html。

以下显示了显示转义XML所需的html语法，包括行号：

.xml

我过去成功使用了示例二，并使用nodejs自动读取xml，将其转义，然后编写<pre class="line-numbers"><code class="language-xml"> <?xml version="1.0" encoding="UTF-8"?> <root> ... ... </root> </code></pre>以便向用户显示。但是，有很多方法可以自动化。

希望这有帮助！

如何使用Javascript或CSS设置在网页上显示的XML文档的样式？

2 个答案:

示例1

示例2