Language handler for CSS

Author: mikesamuel

CHANGES.html

@@ -59,7 +59,7 @@ <h2>14 Jul 2008</h2>
     </ul>
     <h2>6 Jan 2009</h2>
     <ul>
-      <li>Language handlers for Visual Basic, Haskell, and WikiText</li>
+      <li>Language handlers for Visual Basic, Haskell, CSS, and WikiText</li>
       <li>Added <tt>.mxml</tt> extension to the markup style handler for
 	Flex <a href="http://en.wikipedia.org/wiki/MXML">MXML files</a>.  See
         <a

README.html

@@ -73,17 +73,22 @@ <h3>Which languages does it work for?</h3>
     <p>LISPy languages are supported via an extension:
     <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lisp.js"
      ><code>lang-lisp.js</code></a>.</p>
-    <p>And similarly for <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs"
-     ><code>Haskell</code></a>, <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js"
-     ><code>LUA</code></a>, <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js"
+    <p>And similarly for
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css"
+     ><code>CSS</code></a>,
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs"
+     ><code>Haskell</code></a>,
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js"
+     ><code>LUA</code></a>,
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js"
      ><code>OCAML, SML, F#</code></a>,
-     <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js"
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js"
      ><code>Visual Basic</code></a>,
-     <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js"
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js"
      ><code>SQL</code></a>,
-     <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js"
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js"
      ><code>Protocol Buffers</code></a>, and
-     <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js"
+    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js"
      ><code>WikiText</code></a>..
 
     <p>If you'd like to add an extension for your favorite language, please

src/lang-css.js

@@ -0,0 +1,65 @@
+// Copyright (C) 2009 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+
+/**
+ * @fileoverview
+ * Registers a language handler for CSS.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-css"></pre>
+ *
+ *
+ * http://www.w3.org/TR/CSS21/grammar.html Section G2 defines the lexical
+ * grammar.  This scheme does not recognize keywords containing escapes.
+ *
+ * @author [email protected]
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // The space production <s>
+         [PR.PR_PLAIN,       /^[ \t\r\n\f]+/, null, ' \t\r\n\f']
+        ],
+        [
+         // Quoted strings.  <string1> and <string2>
+         [PR.PR_STRING,
+          /^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/, null],
+         [PR.PR_STRING,
+          /^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/, null],
+         [PR.PR_STRING, /^\([^\)\"\']*\)/, /\burl/i],
+         [PR.PR_KEYWORD,
+          /^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,
+          null],
+         // A property name -- an identifier followed by a colon.
+         [PR.PR_KEYWORD, /^-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*(?=\s*:)/i],
+         // A C style block comment.  The <comment> production.
+         [PR.PR_COMMENT, /^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
+         // Escaping text spans
+         [PR.PR_COMMENT, /^(?:<!--|-->)/],
+         // A number possibly containing a suffix.
+         [PR.PR_LITERAL, /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],
+         // A hex color
+         [PR.PR_LITERAL, /^#(?:[0-9a-f]{3}){1,2}/i],
+         // An identifier
+         [PR.PR_PLAIN,
+          /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],
+         // A run of punctuation
+         [PR.PR_PUNCTUATION, /^[^\s\w\'\"]+/]
+        ]),
+    ['css']);

src/lang-vb.js

@@ -55,7 +55,7 @@ PR.registerLangHandler(
          // A run of punctuation
          [PR.PR_PUNCTUATION,
           /^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],
-         // A run of punctuation
+         // Square brackets
          [PR.PR_PUNCTUATION, /^(?:\[|\])/]
         ]),
     ['vb', 'vbs']);

tests/prettify_test.html

@@ -4,6 +4,8 @@
 <title>Code Prettifier</title>
 <script src="../src/prettify.js" type="text/javascript"
  onerror="alert('Error: failed to load ' + this.src)"></script>
+<script src="../src/lang-css.js" type="text/javascript"
+ onerror="alert('Error: failed to load ' + this.src)"></script>
 <script src="../src/lang-hs.js" type="text/javascript"
  onerror="alert('Error: failed to load ' + this.src)"></script>
 <script src="../src/lang-lisp.js" type="text/javascript"
@@ -993,6 +995,29 @@ <h1>Wiki syntax w/ language specified</h1>
   &lt;foo bar="baz"&gt;&lt;boo /&gt;&lt;foo&gt;
 }}}
 </pre>
+
+<h1>CSS w/ language specified</h1>
+<pre class="prettyprint lang-css" id="css">
+&lt;!--
+@charset('UTF-8');
+
+/** A url that is not quoted. */
+@import(url(/more-styles.css));
+
+HTML { content-before: 'hello\20'; content-after: 'w\6f rld';
+       -moz-spiff: inherit !important }
+
+/* Test units on numbers. */
+BODY { margin-bottom: 4px; margin-left: 3in; margin-bottom: 0; margin-top: 5% }
+
+/** Test number literals and quoted values. */
+TABLE.foo TR.bar A#visited { color: #001123; font-family: "monospace" }
+/** bolder is not a name, so should be plain.  !IMPORTANT is a keyword
+  * regardless of case.
+  */
+blink { text-decoration: BLINK !IMPORTANT; font-weight: bolder }
+--&gt;
+</pre>
 </body>
 
 <script type="text/javascript">
@@ -2307,6 +2332,42 @@ <h1>Wiki syntax w/ language specified</h1>
            '`ATV"baz"`END`PUN&gt;&lt;`END`TAGboo`END`PLN `END' +
            '`PUN/&gt;&lt;`END`TAGfoo`END`PUN&gt;`END`PLN<br>' +
       '`END`SRC}}}`END'
+      ),
+  css: (
+      '`COM&lt;!--`END`PLN<br>' +
+      '`END`KWD@charset`END`PUN(`END`STR\'UTF-8\'`END`PUN);`END`PLN<br>' +
+      '<br>' +
+      '`END`COM/** A url that is not quoted. */`END`PLN<br>' +
+      '`END`KWD@import`END`PUN(`END`KWDurl`END`STR(/more-styles.css)`END' +
+          '`PUN);`END`PLN<br>' +
+      '<br>' +
+      'HTML `END`PUN{`END`PLN `END`KWDcontent-before`END`PUN:`END`PLN `END' +
+          '`STR\'hello\20\'`END`PUN;`END`PLN `END`KWDcontent-after`END' +
+          '`PUN:`END`PLN `END`STR\'w\6f rld\'`END`PUN;`END`PLN<br>' +
+      '&nbsp; &nbsp; &nbsp; &nbsp;`END`KWD-moz-spiff`END`PUN:`END`PLN `END' +
+          '`KWDinherit`END`PLN `END`KWD!important`END`PLN `END`PUN}`END' +
+          '`PLN<br>' +
+      '<br>' +
+      '`END`COM/* Test units on numbers. */`END`PLN<br>' +
+      'BODY `END`PUN{`END`PLN `END`KWDmargin-bottom`END`PUN:`END`PLN `END' +
+          '`LIT4px`END`PUN;`END`PLN `END`KWDmargin-left`END`PUN:`END' +
+          '`PLN `END`LIT3in`END`PUN;`END`PLN `END`KWDmargin-bottom`END' +
+          '`PUN:`END`PLN `END`LIT0`END`PUN;`END`PLN `END`KWDmargin-top`END' +
+          '`PUN:`END`PLN `END`LIT5%`END`PLN `END`PUN}`END`PLN<br>' +
+      '<br>' +
+      '`END`COM/** Test number literals and quoted values. */`END`PLN<br>' +
+      'TABLE`END`PUN.`END`PLNfoo TR`END`PUN.`END`PLNbar A`END`PUN#`END' +
+          '`PLNvisited `END`PUN{`END`PLN `END`KWDcolor`END`PUN:`END`PLN `END' +
+          '`LIT#001123`END`PUN;`END`PLN `END`KWDfont-family`END`PUN:`END' +
+          '`PLN `END`STR"monospace"`END`PLN `END`PUN}`END`PLN<br>' +
+      '`END`COM/** bolder is not a name, so should be plain. ' +
+          '&nbsp;!IMPORTANT is a keyword<br>' +
+      '&nbsp; * regardless of case.<br>' +
+      '&nbsp; */`END`PLN<br>' +
+      'blink `END`PUN{`END`PLN `END`KWDtext-decoration`END`PUN:`END' +
+          '`PLN BLINK `END`KWD!IMPORTANT`END`PUN;`END`PLN `END' +
+          '`KWDfont-weight`END`PUN:`END`PLN bolder `END`PUN}`END`PLN<br>' +
+      '`END`COM--&gt;`END'
       )
 };