XSLT 试图在本地引用默认的 Mozilla 样式

Question

我想了解更多默认的 Mozilla XSLT 是如何工作的，因为我喜欢默认显示 XML 文档的方式，并且可以展开/最小化各种节点。

我获得了以下副本：

我无法以相同的方式找到以下内容，而是通过 Mozilla 浏览器获取它们，并将它们保存在本地。 IE。

chrome://global/locale/xml/prettyprint.dtd

prettyprint.dtd
global.dtd

所有四个文件都保存在同一个文件夹中。

准备了一些简单的XML保存在同一个文件夹中：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="XMLPrettyPrint.xsl"?>
<breakfast_menu>
    <food>
        <name>Belgian Waffles</name>
        <price>.95</price>
    </food>
    <food>
        <name>Strawberry Belgian Waffles</name>
        <price>.95</price>
    </food>
</breakfast_menu>

在 XMLPrettyPrint.xsl 中我编辑了以下内容：

<xsl:template match="/">
  <link href="chrome://global/content/xml/XMLPrettyPrint.css" type="text/css" rel="stylesheet"/>
  <link title="Monospace" href="chrome://global/content/xml/XMLMonoPrint.css" type="text/css" rel="alternate stylesheet"/>
  ...
</xsl:template>

到

<xsl:template match="/">
  <link href="XMLPrettyPrint.css" type="text/css" rel="stylesheet"/>
  <link title="Monospace" href="XMLMonoPrint.css" type="text/css" rel="alternate stylesheet"/>
  ...
</xsl:template>

如果我打开 XML 文件 Mozilla，它只能部分工作。文档看起来格式正确，但颜色不存在，节点也没有折叠。

我还需要更改什么？

编辑 2016.03.29 @16:00

<xsl:template match="/">
<html>
<head>
  <link href="XMLPrettyPrint.css" type="text/css" rel="stylesheet"/>
  <link title="Monospace" href="XMLMonoPrint.css" type="text/css" rel="alternate stylesheet"/>
  <div id="header" dir="&locale.dir;">
    <p>
      &xml.nostylesheet;
    </p>
  </div>
</head>
<body>
  <xsl:apply-templates/>
</body>
</html>
</xsl:template>

更新为@import url

/*@import url("resource://gre-resources/viewsource.css");*/
@import url("viewsource.css");

Answer 1

语法突出显示（着色）CSS 规则在 viewsource.css 文件中定义，但它们仅适用于在 highlight class 中具有祖先的元素.

XMLPrettyPrint.xsl 文件不会生成带有 highlight class 的任何内容，因此您可以通过包装第一个 xsl:template 中的 <xsl:apply-templates/> 来解决这个问题] 在 div 中有这个 class:

<div class="highlight">
  <xsl:apply-templates/>
</div>

现在结果以彩色呈现，但它们太靠近左侧并且根元素上的 − 丢失了。这是因为 Mozilla 漂亮的打印渲染器似乎用一些填充包围了结果，并且 − 在 div 和 expander class 中，它的左边距为 -16px。

您可以通过在包装器 div 左侧填充 16 像素来解决此问题：

<div class="highlight" style="padding-left: 16px">
  <xsl:apply-templates/>
</div>

您需要 JavaScript 才能使用 expand/collapse 功能。 XMLPrettyPrint.xml 文件为此定义了代码。您可以通过将它放在 <script> 元素中来将其包含在您的 XSLT 中。

为了附加事件，您可以给包装器 div 一个 ID 和 select 它来附加事件：

<div id="content" class="highlight" style="padding-left: 16px">
  <xsl:apply-templates/>
</div>
<script>
    <![CDATA[
    document.getElementById('content').addEventListener('click', function (event) {
        try {
            var par = event.target;
            if (par.nodeName == 'div' && par.className == 'expander') {
                if (par.parentNode.className == 'expander-closed') {
                    par.parentNode.className = 'expander-open';
                    par.firstChild.data = '\u2212';
                }
                else {
                    par.parentNode.className = 'expander-closed';
                    par.firstChild.data = '+';
                }
            }
        } catch (e) {
        }
    });
    ]]>
</script>

完成后，呈现的 HTML 应该像 Mozilla 的默认呈现器一样运行。

XSLT 试图在本地引用默认的 Mozilla 样式

XSLT trying to locally reference default Mozilla styles

css

xml

xslt

mozilla