Why does the google code prettifier refuse to work with XSLT?

Question

The google code prettifier (which is also used here, on SO) parses the content of a .prettyprint and injects some <span>s to allow highlighting via css.

This works perfectly simple, unless I'm serving an XML file with an XSLT. Then, the prettifier only runs correctly in Opera, but refuses to work with Firefox or Chrome (Chromium to be precise). I complied a minimal example, see below.

If I open the XHTML file (generated on the server with xsltproc) directly, Firefox suddenly does manage to run prettyprint correctly. But if it transforms the XML itself, prettify stops working. How can I get around this? Am I perhaps doing something wrong?

This is the XML file

<?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>

And this is the stylesheet:

<?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>

For reference, this is the XHTML 1.1 that is generated by xsltproc:

<?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>

Edit:

This is the markup as rendered by Firefox (extracted using 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>

Because xslt is like a pig: you can put it lipstick on it but it's still a pig... — tkone, Apr 08 '12 at 23:01
@tkone: Frankly I think XSLT is a pretty neat idea. However, the common practice to apply the transformation on the server side, is a bit misguided. — bitmask, Apr 08 '12 at 23:15
@Dimitre Novatchev: Why would you remove the xslt tag? This is entirely related to xslt. — bitmask, Apr 08 '12 at 23:17
@bitmask: Which area of the XSLT language is this question related to? I cannot find a single such area. This question is browser-implementation-specific -- it has no answer in the W3C XSLT specification. — Dimitre Novatchev, Apr 08 '12 at 23:21
@DimitreNovatchev: It doesn't have to be a answerable directly by the XSLT spec. The problem manifests *only* because and when XSLT is used. As soon as the transformation is out of the picture, there is no question any more. — bitmask, Apr 08 '12 at 23:38
@DimitreNovatchev: Btw. if you can point me to a XSLT implementation that does something similar to the javascripted gcp, that'd do as well :) — bitmask, Apr 08 '12 at 23:39
@bitmask: I don't believe this is an XSLT question. Peculiarities of different browser implementations aren't "XSLT". Also, I don't understand what you mean by the phrase "javascripted gcp". If you have a question how to solve a particular problem with XSLT, you can ask this question here at SO. — Dimitre Novatchev, Apr 08 '12 at 23:54

score 0 · Answer 1 · answered Aug 10 '12 at 13:00

0

Maybe you could try adding a

<script>prettyPrint()</script>

after the body. I think that maybe Firefox executes the code line by line, so it will first try to execute prettyPrint() and insert the XSLT content after, so prettyPrint() won't have anything to execute...

answered Aug 10 '12 at 13:00

luigig44

417
1
3
10

1

No, that's not it. I even tried an `onclick` event on a picture. It's like it doesn't recognise the markdown. – bitmask Aug 10 '12 at 18:16
No, i mean the source code generated by FF. I think that if you use CTRL+U the code AS RENDERED by Firefox should appear, but i May be wrong – luigig44 Aug 10 '12 at 19:27
See edit. The tokenisation seems to work, but the cascading style sheet is apparently ignored. – bitmask Aug 10 '12 at 21:24
It seems that Prettify is unable to add the `class` attributte to the spans. It seems that the problem is not in the stylesheet, but in the javascript. Another thing I noticed is that the `` at the start of the code is not shown when firefox renders the XSLT, but it is when it's rendered on the server-side. Plus, i think those `` tags should be ``. Can you try telling it to be an XHTML 1 document, rather than 1.1? I tested gcp in 1.0, but not 1.1. – luigig44 Aug 11 '12 at 18:22

score 0 · Answer 2 · answered Jan 25 '13 at 09:20

0

Update the output method of your xsl from xml to 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"/>

answered Jan 25 '13 at 09:20

DHornpout

6,400
4
25
20

Why does the google code prettifier refuse to work with XSLT?

Edit:

2 Answers2