gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:32:20 25 4
gpt4 key购买 nike

我想了解更多默认的 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>$5.95</price>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.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>

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

我还需要更改什么?

编辑 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");

最佳答案

语法高亮(着色)CSS 规则在 viewsource.css 文件中定义,但它们仅适用于在 highlight 中具有祖先的元素。类(class)。

XMLPrettyPrint.xsl 文件不会生成任何带有 highlight 的内容类,所以你可以通过包装 <xsl:apply-templates/> 来解决这个问题从第一个xsl:templatediv有这个类:

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

现在结果以彩色呈现,但它们太靠近左侧和 根元素上的缺失。这是因为 Mozilla pretty-print 渲染器似乎用一些填充物包围了结果,并且 divexpander类,其左边距为 -16px .

你可以通过给你的包装器 div 来解决这个问题左边 16px 的内边距:

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

您需要一些 JavaScript 才能使展开/折叠功能起作用。 XMLPrettyPrint.xml文件为此定义了代码。您可以通过将其放入 <script> 中将其包含在您的 XSLT 中。元素。

为了附加事件,您可以给包装器 div一个 ID 并选择它以附加事件:

<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 的默认呈现器一样表现。

关于css - XSLT 试图在本地引用默认的 Mozilla 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36281502/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com