Support for @-rules and pseudo-classes in CSS

martinezdylan · May 11, 2009 · 9d44a35 · 9d44a35
2 parents b2f0ed8 + 81832d8
commit 9d44a35
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/languages/css.js b/src/languages/css.js
@@ -5,13 +5,21 @@ Requires:  html-xml.js
 
 hljs.LANGUAGES.css = {
   defaultMode: {
-    contains: ['id', 'class', 'attr_selector', 'rules', 'comment'],
+    contains: ['at_rule', 'id', 'class', 'attr_selector', 'pseudo', 'rules', 'comment'],
     keywords: hljs.HTML_TAGS,
     lexems: [hljs.IDENT_RE],
     illegal: '='
   },
   case_insensitive: true,
   modes: [
+    {
+      className: 'at_rule',
+      begin: '@', end: '[{;]',
+      excludeEnd: true,
+      lexems: [hljs.IDENT_RE],
+      keywords: {'import': 1, 'page': 1, 'media': 1, 'charset': 1, 'font-face': 1},
+      contains: ['function', 'string', 'number', 'pseudo']
+    },
     {
       className: 'id',
       begin: '\\#[A-Za-z0-9_-]+', end: '^'
@@ -26,6 +34,10 @@ hljs.LANGUAGES.css = {
       begin: '\\[', end: '\\]',
       illegal: '$'
     },
+    {
+      className: 'pseudo',
+      begin: ':(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\"\\\']+', end: '^'
+    },
     {
       className: 'rules',
       begin: '{', end: '}',

diff --git a/src/styles/idea.css b/src/styles/idea.css
@@ -28,7 +28,7 @@ pre code {
     background: #efefef;
 }
 
-.tag .title, .id, .attr_selector, .literal, .keyword, .hexcolor, .css .function, .ini .title, .css .class, .list .title {
+.tag .title, .id, .attr_selector, .pseudo, .literal, .keyword, .hexcolor, .css .function, .ini .title, .css .class, .list .title {
     font-weight: bold;
     color: #000080;
 }

diff --git a/src/styles/sunburst.css b/src/styles/sunburst.css
@@ -54,7 +54,7 @@ pre {
     color: #3E87E3;
 }
 
-.css .keyword {
+.css .keyword, .pseudo {
     color: #CDA869;
 }
 

diff --git a/src/test.html b/src/test.html
@@ -347,12 +347,21 @@ <h2>Automatically detected languages</h2>
   <tr>
     <th>CSS
     <td>
-<pre><code>body,
+<pre><code class="css">body,
 html {
   font: Tahoma, Arial, san-serif;
   background: url('hatch.png');
 }
+
+@import url('print.css');
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @page :left {
+    body:first-of-type pre:after {
+      content: 'highlight: ' attr(class);
+    }
+}
+
 #content {
   width: 100%; /* wide enough */
   height: 100%