为什么谷歌代码美化器拒绝使用 XSLT？答案

【问题标题】：Why does the google code prettifier refuse to work with XSLT?为什么谷歌代码美化器拒绝使用 XSLT？
【发布时间】：2012-04-08 21:43:47
【问题描述】：

google code prettifier（也在这里，在 SO 上使用）解析 .prettyprint 的内容并注入一些 <span>s 以允许通过 css 突出显示。

这非常简单，除非我使用 XSLT 提供 XML 文件。然后，美化器只能在 Opera 中正确运行，但拒绝与 Firefox 或 Chrome（准确地说是 Chromium）一起工作。我编译了一个最小的例子，见下文。

如果我直接打开 XHTML 文件（在服务器上使用xsltproc 生成），Firefox 会突然设法正确运行 prettyprint。但如果它转换 XML 本身，prettify 就会停止工作。我怎样才能解决这个问题？我是不是做错了什么？

这是 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="test.xslt" type="text/xsl" ?>
<root><![CDATA[
int main() {
  float x {7.7};
  return 0;
}
]]></root>

这是样式表：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:output method="xml" version="1.0" indent="yes"
    doctype-public="-//W3C//DTD XHTML 1.1//EN"
    doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
  />
  <xsl:template match="/">
    <html><head>
      <link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css" />
      <script type="text/javascript" src="_include/gcp/prettify.js"> </script>
    </head>
    <body onload="prettyPrint()">
    <pre class="prettyprint"><xsl:value-of select="." /></pre>
    </body></html>
  </xsl:template>

</xsl:stylesheet>

作为参考，这是由xsltproc生成的XHTML 1.1：

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css"/>
    <script type="text/javascript" src="_include/gcp/prettify.js"/>
  </head>
  <body onload="prettyPrint()">
    <pre class="prettyprint">
int main() {
  float x {7.7};
  return 0;
}
</pre>
  </body>
</html>

编辑：

这是 Firefox 呈现的标记（使用 Ctrl+Shift+I 提取）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="gcp/prettify.css"/>
    <script type="text/javascript" src="gcp/prettify.js"/>
  </head>
  <body onload="prettyPrint()">
    <pre class="prettyprint">
      <SPAN xmlns=""> </SPAN>
      <SPAN xmlns="">int</SPAN>
      <SPAN xmlns=""> main</SPAN>
      <SPAN xmlns="">()</SPAN>
      <SPAN xmlns=""> </SPAN>
      <SPAN xmlns="">{</SPAN>
      <SPAN xmlns="">
  </SPAN>
      <SPAN xmlns="">float</SPAN>
      <SPAN xmlns=""> x </SPAN>
      <SPAN xmlns="">{</SPAN>
      <SPAN xmlns="">7.7</SPAN>
      <SPAN xmlns="">};</SPAN>
      <SPAN xmlns="">
  </SPAN>
      <SPAN xmlns="">return</SPAN>
      <SPAN xmlns=""> </SPAN>
      <SPAN xmlns="">0</SPAN>
      <SPAN xmlns="">;</SPAN>
      <SPAN xmlns="">
</SPAN>
      <SPAN xmlns="">}</SPAN>
    </pre>
  </body>
</html>

【问题讨论】：

因为 xslt 就像一头猪：你可以把它涂上口红，但它仍然是一头猪……
@tkone：坦率地说，我认为 XSLT 是一个非常巧妙的想法。但是，在服务器端应用转换的常见做法有点误导。
@Dimitre Novatchev：为什么要删除 xslt 标签？这与 xslt 完全相关。
@bitmask：这个问题与 XSLT 语言的哪个领域有关？我找不到一个这样的区域。这个问题是特定于浏览器实现的——它在 W3C XSLT 规范中没有答案。
@DimitreNovaatchev：XSLT 规范不必直接回答它。该问题仅在使用 XSLT 时才表现出来。转型一出，就没有问题了。

标签： javascript webkit gecko google-code-prettify

【解决方案1】：

也许你可以尝试添加一个

<script>prettyPrint()</script>

在身体之后。我想可能是Firefox逐行执行代码，所以会先尝试执行prettyPrint()，然后插入XSLT内容，这样prettyPrint()就没有什么可以执行了……

【讨论】：

不，不是这样。我什至在图片上尝试了onclick 事件。就像它不识别降价一样。
不，我是指FF生成的源代码。我认为如果你使用 CTRL+U 应该会出现 Firefox 渲染的代码，但我可能错了
查看编辑。标记化似乎有效，但级联样式表显然被忽略了。
Prettify 似乎无法将 class 属性添加到跨度。似乎问题不在于样式表，而在于 javascript。我注意到的另一件事是，当 firefox 呈现 XSLT 时，代码开头的 <?xml ?> 没有显示，但它是在服务器端呈现时。另外，我认为那些<SPAN> 标签应该是<span>。你能试着告诉它是一个 XHTML 1 文档，而不是 1.1 吗？我在 1.0 中测试了 gcp，但不是 1.1。

【解决方案2】：

将 xsl 的输出方法从 xml 更新为 html。

<xsl:output method="html" version="1.0" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

【讨论】：