CSS highlight is wrong if contained inside <style> tag

[GoogleCodeExporter]

What steps will reproduce the problem?
<code class="prettyprint lang-css">&lt;style type='text/css'>
/* desert scheme ported from vim to google prettify */
code.prettyprint { display: block; padding: 2px; border: 1px solid #888;
background-color: #333; }
.str { color: #ffa0a0; } /* string  - pink */
.kwd { color: #f0e68c; font-weight: bold; }
.com { color: #87ceeb; } /* comment - skyblue */
.typ { color: #98fb98; } /* type    - lightgreen */
.lit { color: #cd5c5c; } /* literal - darkred */
.pun { color: #fff; }    /* punctuation */
.pln { color: #fff; }    /* plaintext */
.tag { color: #f0e68c; font-weight: bold; } /* html/xml tag    - lightyellow*/
.atn { color: #bdb76b; font-weight: bold; } /* attribute name  - khaki*/
.atv { color: #ffa0a0; } /* attribute value - pink */
.dec { color: #98fb98; } /* decimal         - lightgreen */
&lt;/style></code>

What is the expected output?  What do you see instead?
<code class="prettyprint lang-css"><span class="tag">&lt;style</span><span
class="pln"> </span><span class="atn">type</span><span
class="pun">=</span><span class="atv">'text/css'</span><span
class="tag">&gt;</span><span class="pln"><br></span><span class="com">/*
desert scheme ported from vim to google prettify */</span><span
class="pln"><br>code</span><span class="pun">.</span><span
class="pln">prettyprint </span><span class="pun">{</span><span class="pln">
display</span><span class="pun">:</span><span class="pln">
block</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="pln"> </span><span
class="lit">2px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">:</span><span class="pln"> </span><span
class="lit">1px</span><span class="pln"> solid </span><span
class="com">#888; background-color: #333; }</span><span
class="pln"><br></span><span class="pun">.</span><span class="pln">str
</span><span class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#ffa0a0; }
/* string &nbsp;- pink */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">kwd </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#f0e68c;
font-weight: bold; }</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">com </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#87ceeb; }
/* comment - skyblue */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">typ </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#98fb98; }
/* type &nbsp; &nbsp;- lightgreen */</span><span
class="pln"><br></span><span class="pun">.</span><span class="pln">lit
</span><span class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#cd5c5c; }
/* literal - darkred */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">pun </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#fff; }
&nbsp; &nbsp;/* punctuation */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">pln </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#fff; }
&nbsp; &nbsp;/* plaintext */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">tag </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#f0e68c;
font-weight: bold; } /* html/xml tag &nbsp; &nbsp;-
lightyellow*/</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">atn </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#bdb76b;
font-weight: bold; } /* attribute name &nbsp;- khaki*/</span><span
class="pln"><br></span><span class="pun">.</span><span class="pln">atv
</span><span class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#ffa0a0; }
/* attribute value - pink */</span><span class="pln"><br></span><span
class="pun">.</span><span class="pln">dec </span><span
class="pun">{</span><span class="pln"> color</span><span
class="pun">:</span><span class="pln"> </span><span class="com">#98fb98; }
/* decimal &nbsp; &nbsp; &nbsp; &nbsp; - lightgreen */</span><span
class="pln"><br></span><span class="tag">&lt;/style&gt;</span></code>

What version are you using?  On what browser?
21-May-2009

Please provide any additional information below.

Original issue reported on code.google.com by techtonik@gmail.com on 5 Jun 2009 at 8:17

[GoogleCodeExporter]

I'm not quite sure what the issue is, but you are using lang-css with HTML?
If you change the lang-css to lang-html or leave it out altogether, does your 
problem
go away?

Original comment by mikesamuel@gmail.com on 14 Aug 2009 at 5:55

[GoogleCodeExporter]

Removed lang-css, tried lang-html, but the snippet highlight is still wrong. 
Look here 
- http://techtonik.rainforce.org/2009/06/code-syntax-hightlight-for-blogger.html

Original comment by techtonik@gmail.com on 21 Aug 2009 at 8:36

[GoogleCodeExporter]

Ok.  I think I see the problem: # is being treated as starting a comment.

Original comment by mikesamuel@gmail.com on 3 Oct 2009 at 7:34

• Changed state: Accepted

[GoogleCodeExporter]

And # is being treated as a comment character because you never load 
lang-css.js into
your page.   Please try that.  It uses the default code highlighter if the CSS 
one is
unavailable.

Original comment by mikesamuel@gmail.com on 3 Oct 2009 at 7:41

• Changed state: Fixed

[GoogleCodeExporter]

I thought that "lang-css" class would be enough. Perhaps documentation was not 
clear 
enough that additional lang-css.js is required as well as class. BTW, why isn't 
it 
possible to fetch the lang-css.js dynamically if its class is encountered?

Original comment by techtonik@gmail.com on 3 Oct 2009 at 10:58

[GoogleCodeExporter]

You're right.  The documentation could be clearer.

It is certainly possibly to dynamically fetch code, but that would introduce a
synchronous network round trip.

Original comment by mikesamuel@gmail.com on 5 Oct 2009 at 2:57

[GoogleCodeExporter]

Is this synchronous roundtrip a real problem? The .js file is still cacheable 
by the 
browser, isn't it?

Original comment by techtonik@gmail.com on 6 Oct 2009 at 12:27

[GoogleCodeExporter]

Depending on how it is served, it would probably be cacheable.
If it stops user interaction with the page on first view, they may not stay on 
the
site long enough to benefit from the caching.

Original comment by mikesamuel@gmail.com on 6 Oct 2009 at 6:43