kmx git

Commit 9f82e1c952d16c42f9167c1910ff25c2d9c7db0b

2012-07-26T19:13:47
Added more examples, added highlighting for entities, URLs and CSS strings
diff --git a/components/prism-css.js b/components/prism-css.js
index e63e0ac..c76207c 100644
--- a/components/prism-css.js
+++ b/components/prism-css.js
@@ -4,6 +4,7 @@ Prism.languages.css = {
 	'url': /url\((?:'|")?(.+?)(?:'|")?\)/gi,
 	'selector': /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
 	'property': /(\b|\B)[a-z-]+(?=\s*:)/ig,
+	'string': /("|')(\\?.)*?\1/g,
 	'important': /\B!important\b/gi,
 	'ignore': /&(lt|gt|amp);/gi,
 	'punctuation': /[\{\};:]/g
diff --git a/components/prism-css.min.js b/components/prism-css.min.js
index 9004149..a8b06dc 100644
--- a/components/prism-css.min.js
+++ b/components/prism-css.min.js
@@ -1 +1 @@
-Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,url:/url\((?:'|")?(.+?)(?:'|")?\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};
\ No newline at end of file
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,url:/url\((?:'|")?(.+?)(?:'|")?\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};
\ No newline at end of file
diff --git a/examples.html b/examples.html
index de942d9..ca7aa65 100644
--- a/examples.html
+++ b/examples.html
@@ -49,107 +49,138 @@
 	<code class="language-none">&lt;p>hi!&lt;/p></code>
 </section>
 
-<section>
+<section class="language-markup">
 	<h1>Markup</h1>
 	
 	<h2>Empty tag</h2>
-	<pre class="prism"><code class="language-markup">&lt;p>&lt;/p></code></pre>
+	<pre><code>&lt;p>&lt;/p></code></pre>
 	
 	<h2>Tag that spans multiple lines</h2>
-	<pre class="prism"><code class="language-markup">&lt;p
+	<pre><code>&lt;p
 >hello!
 &lt;/p></code></pre>
 	
 	<h2>Name-attribute pair</h2>
-	<pre class="prism"><code class="language-markup">&lt;p class="prism">&lt;/p></code></pre>
+	<pre><code>&lt;p>&lt;/p></code></pre>
 	
 	<h2>Name-attribute pair without quotes</h2>
-	<pre class="prism"><code class="language-markup">&lt;p class=prism>&lt;/p></code></pre>
+	<pre><code>&lt;p class=prism>&lt;/p></code></pre>
 	
 	<h2>Attribute without value</h2>
-	<pre class="prism"><code class="language-markup">&lt;p data-foo>&lt;/p></code></pre>
-	<pre class="prism"><code class="language-markup">&lt;p data-foo >&lt;/p></code></pre>
+	<pre><code>&lt;p data-foo>&lt;/p></code></pre>
+	<pre><code>&lt;p data-foo >&lt;/p></code></pre>
 	
 	<h2>Namespaces</h2>
-	<pre class="prism"><code class="language-markup">&lt;html:p foo:bar="baz" foo:weee>&lt;/html:p></code></pre>
+	<pre><code>&lt;html:p foo:bar="baz" foo:weee>&lt;/html:p></code></pre>
 	
 	<h2>XML prolog</h2>
-	<pre class="prism"><code class="language-markup">&lt;?xml version="1.0" encoding="utf-8"?>
+	<pre><code>&lt;?xml version="1.0" encoding="utf-8"?>
 &lt;svg>&lt;/svg></code></pre>
 	
 	<h2>DOCTYPE</h2>
-	<pre class="prism"><code class="language-markup">&lt;!DOCTYPE html>
+	<pre><code>&lt;!DOCTYPE html>
 &lt;html>&lt;/html></code></pre>
 
 	<h2>CDATA section</h2>
-	<pre class="prism"><code class="language-markup">&lt;ns1:description>&lt;![CDATA[
+	<pre><code>&lt;ns1:description>&lt;![CDATA[
   CDATA is &lt;not> magical.
 ]]>&lt;/ns1:description></code></pre>
 	
 	<h2>Comment</h2>
-	<pre class="prism"><code class="language-markup">&lt;!-- I'm a comment -->
+	<pre><code>&lt;!-- I'm a comment -->
 And i'm not</code></pre>
 	
 	<h2>Entities</h2>
-	<pre class="prism"><code class="language-markup">&amp;amp; &amp;#x2665; &amp;#160; &amp;#x152;</code></pre>
+	<pre><code>&amp;amp; &amp;#x2665; &amp;#160; &amp;#x152;</code></pre>
 
 </pre>
 </section>
 
-<section>
+<section class="language-css">
 	<h1>CSS</h1>
 	
 	<h2>Empty rule</h2>
-	<pre class="prism"><code class="language-css">*{}</code></pre>
-	<pre class="prism"><code class="language-css">* {}</code></pre>
-	<pre class="prism"><code class="language-css">p {}</code></pre>
-	<pre class="prism"><code class="language-css">ul,
+	<pre><code>*{} * {} p {}</code></pre>
+	<pre><code>ul,
 ol {}</code></pre>
 	
 	<h2>Simple rule</h2>
-	<pre class="prism"><code class="language-css">p { color: red; }</code></pre>
+	<pre><code>p { color: red; }</code></pre>
 
 	<h2>Important rule</h2>
-	<pre class="prism"><code class="language-css">p { color: red !important; }</code></pre>
+	<pre><code>p { color: red !important; }</code></pre>
 
 	<h2>@ rule</h2>
-	<pre class="prism"><code class="language-css">@media screen and (min-width: 100px) {}</code></pre>
+	<pre><code>@media screen and (min-width: 100px) {}</code></pre>
 
 	<h2>Comment</h2>
-	<pre class="prism"><code class="language-css">/* Simple comment here */</code></pre>
+	<pre><code>/* Simple comment here */</code></pre>
+	
+	<h2>String</h2>
+	<pre><code>content: 'foo';</code></pre>
+	
+	<h2>URL</h2>
+	<pre><code>content: url(foo.png);</code></pre>
 </pre>
 </section>
 
-<section>
+<section class="language-javascript">
 	<h1>JavaScript</h1>
 	
 	<h2>Variable assignment</h2>
-	<pre class="prism"><code class="language-javascript">var foo = "bar", baz = 5;</code></pre>
+	<pre><code>var foo = "bar", baz = 5;</code></pre>
 	
 	<h2>Operators</h2>
-	<pre class="prism"><code class="language-javascript">(1 + 2 * 3)/4 >= 3 &amp;&amp; 4 &lt; 5 || 6 > 7</code></pre>
+	<pre><code>(1 + 2 * 3)/4 >= 3 &amp;&amp; 4 &lt; 5 || 6 > 7</code></pre>
 	
 	<h2>Indented code</h2>
-	<pre class="prism"><code class="language-javascript">if (true) {
+	<pre><code>if (true) {
 	while (true) {
 		doSomething();
 	}
 }</code></pre>
 
-	<h2>Regexes</h2>
-	<pre class="prism"><code class="language-javascript">/([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g</code></pre>
-	<pre class="prism"><code class="language-javascript">/\/\*[\w\W]*?\*\//g</code></pre>
+	<h2>Regex with slashes</h2>
+	<pre><code>var foo = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;</code></pre>
+	
+	<h2>Regex that ends with double slash</h2>
+	<pre><code>var bar = /\/\*[\w\W]*?\*\//g;</code></pre>
 
 	<h2>Single line comments &amp; regexes</h2>
-	<pre class="prism"><code class="language-javascript">// http://lea.verou.me
+	<pre><code>// http://lea.verou.me
 var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
 	
 	<h2>Link in comment</h2>
-	<pre class="prism"><code class="language-javascript">// http://lea.verou.me
+	<pre><code>// http://lea.verou.me
 /* http://lea.verou.me */</code></pre>
 
+	<h2>Nested strings</h2>
+	<pre><code>var foo = "foo", bar = "He \"said\" 'hi'!"</code></pre>
+	
+	<h2>Strings inside comments</h2>
+	<pre><code>// "foo"</code></pre>
+	<pre><code>/* "foo" */</code></pre>
+
 	<h2>Strings with slashes</h2>
-	<pre class="prism"><code class="language-javascript">env.content + '&lt;/' + env.tag + '>'</code></pre>
+	<pre><code>env.content + '&lt;/' + env.tag + '>'</code></pre>
+</section>
+
+<section id="failures" class="language-javascript">
+	<h1>Known failures (JavaScript)</h1>
+	<p>There are certain edge cases where Prism will fail.
+	There are always such cases in every regex-based syntax highlighter.
+	However, Prism dares to be open and honest about them.
+	If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
+	</p>
+	
+	<h2>Two strings with slashes on the same line</h2>
+	<pre><code>var foo = "/" + "/";</code></pre>
+	
+	<h2>Comment-like strings</h2>
+	<pre><code>"foo /* bar */ baz"; "foo // bar";</code></pre>
+	
+	<h2>Regex inside single line comment</h2>
+	<pre><code>// hey, /this fails/ :(</code></pre>
 </section>
 
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
diff --git a/prism.css b/prism.css
index 8d1e0b1..ae69986 100644
--- a/prism.css
+++ b/prism.css
@@ -63,7 +63,7 @@ pre[class*="language-"] {
 
 .token.selector,
 .token.attr-name,
-.token.string {
+.language-javascript .token.string {
 	color: #690;
 }
 
@@ -71,7 +71,10 @@ pre[class*="language-"] {
 		color: #ab6; /* 70% of .attr-name on .prism’s background */
 	}
 
-.token.operator {
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string {
 	color: #a67f59;
 	background: hsla(0,0%,100%,.5);
 }
@@ -90,4 +93,8 @@ pre[class*="language-"] {
 
 .token.important {
 	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
 }
\ No newline at end of file
diff --git a/prism.js b/prism.js
index 6a347f8..2616917 100644
--- a/prism.js
+++ b/prism.js
@@ -292,6 +292,7 @@ Prism.languages.css = {
 	'url': /url\((?:'|")?(.+?)(?:'|")?\)/gi,
 	'selector': /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
 	'property': /(\b|\B)[a-z-]+(?=\s*:)/ig,
+	'string': /("|')(\\?.)*?\1/g,
 	'important': /\B!important\b/gi,
 	'ignore': /&(lt|gt|amp);/gi,
 	'punctuation': /[\{\};:]/g
kmx.io/prism.js

Commit 9f82e1c952d16c42f9167c1910ff25c2d9c7db0b
