kmx.io/prism.js

diff --git a/code.js b/code.js
index 2f4cc2f..20cc543 100644
--- a/code.js
+++ b/code.js
@@ -232,4 +232,31 @@ for (var id in themes) {
 }
 
 setTheme(current);
+})();
+
+(function(){
+
+function listPlugins(ul) {
+	for (var id in components.plugins) {
+		if (id == 'meta') {
+			continue;
+		}
+		
+		var plugin = components.plugins[id];
+		
+		$u.element.create('li', {
+			contents: {
+				tag: 'a',
+				prop: {
+					href: 'plugins/' + id
+				},
+				contents: plugin.title || plugin
+			},
+			inside: ul
+		});	
+	}
+}
+
+$$('.plugin-list').forEach(listPlugins);
+
 })();
\ No newline at end of file
diff --git a/examples.html b/examples.html
index 9e8d8e8..0999ca9 100644
--- a/examples.html
+++ b/examples.html
@@ -192,8 +192,9 @@ var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
 	<h2>Two or more division operators on the same line</h2>
 	<pre><code>var foo = 5 / 6 / 7;</code></pre>
 	
-	<h2>A division operator on the same line as a regex, preceding it</h2>
+	<h2>A division operator on the same line as a regex</h2>
 	<pre><code>var foo = 1/2, bar = /a/g;</code></pre>
+	<pre><code>var foo = /a/, bar = 3/4;</code></pre>
 </section>
 
 <section id="failures" class="language-javascript">
@@ -207,8 +208,8 @@ var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
 	<h2>Comment-like substrings</h2>
 	<pre><code>"foo /* bar */ baz"; "foo // bar";</code></pre>
 	
-	<h2>Two quotes of the same type (i.e. single or double) inside a regex</h2>
-	<pre><code>/"foo"/;</code></pre>
+	<h2>Two quotes of the same type (i.e. both single or both double) inside a regex</h2>
+	<pre><code>var foo = /"foo"/;</code></pre>
 </section>
 
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
diff --git a/faq.html b/faq.html
index efedb85..266db72 100644
--- a/faq.html
+++ b/faq.html
@@ -8,7 +8,9 @@
 <link rel="stylesheet" href="prism.css" data-noprefix />
 <style>
 #toc {
+	display: block;
 	position: static;
+	max-width: 900px;
 	font-size: 100%;
 	opacity: 1;
 }
@@ -39,6 +41,7 @@
 	However, in most web applications and websites a small error margin is usually acceptable and a rare highlighting failure is not the end of the world.
 	A syntax highlighter based on regular expressions might only be accurate 99% of the time (the actual percentage is just a guess),
 	but in exchange for the small error margin, it offers some very important benefits:
+	
 	<ul>
 		<li>Smaller filesize. Proper parsers are very big.</li>
 		<li>Extensibility. Authors can define new languages simply by knowing how to code regular expressions. 
@@ -47,7 +50,9 @@
 	</ul>
 	
 	<p>For this reason, most syntax highlighters on the web and on desktop, are powered by regular expressions. This includes the internal syntax
-	highlighters used by popular native applications like Espresso and Sublime Text, at this time of writing.</p>
+	highlighters used by popular native applications like Espresso and Sublime Text, at the time of writing.
+	Of course, not every regex-powered syntax highlighter is created equal. The number and type of failures can be vastly different, depending on
+	the exact algorithm used. <a href="examples.html#failures">Prism’s known failures are documented in the Examples section</a>.</p>
 </section>
 
 <section>
diff --git a/index.html b/index.html
index 1578e0f..c371a4c 100644
--- a/index.html
+++ b/index.html
@@ -70,6 +70,12 @@
 	<h1>Full list of features</h1>
 	<ul>
 		<li><strong>Only 1.5KB</strong> minified &amp; gzipped (core). Each language definition adds roughly 300-500 bytes.</li>
+		<li>Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, 
+			like <code>&lt;pre></code> (on its own) or <code>&lt;script></code>. 
+			Prism forces you to use the correct element for marking up code: <code>&lt;code></code>. 
+			On its own for inline code, or inside a &lt;pre> for blocks of code.
+			In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.</li>
+		<li>The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.</li>
 		<li>Supports <strong>parallelism with Web Workers</strong>, if available. Disabled by default (<a href="faq.html#why-is-asynchronous-highlighting-disabled-by-default">why?</a>).</li>
 		<li>Very easy to extend without modifying the code, due to Prism’s <a href="#plugins">plugin architecture</a>. Multiple hooks are scattered throughout the source.</li>
 		<li>Very easy to <a href="extending.html#language-definitions">define new languages</a>. Only thing you need is a good understanding of regular expressions</li>
@@ -114,7 +120,8 @@
 	
 	<p>If you want to opt-out of highlighting for a <code>&lt;code></code> element that is a descendant of an element with a declared code language, you can add the class <code>language-none</code> to it (or any non-existing language, really).</p>
 	
-	<p>The <a href="http://www.w3.org/TR/html5/the-pre-element.html#the-pre-element">recommended way to mark up a code block</a> (both for semantics and for Prism) is a <code>&lt;pre></code> inside a <code>&lt;code></code> element, like so:</p>
+	<p>The <a href="http://www.w3.org/TR/html5/the-pre-element.html#the-pre-element">recommended way to mark up a code block</a> 
+	(both for semantics and for Prism) is a <code>&lt;pre></code> element with a <code>&lt;code></code> element inside, like so:</p>
 	<pre><code>&lt;pre>&lt;code class="language-css">p { color: red }&lt;/code>&lt;/pre></code></pre>
 	<p>If you use that pattern, the <code>&lt;pre></code> will automatically get the <code>language-xxxx</code> class (if it doesn’t already have it) and will be styled as a code block.</p>
 	
@@ -127,7 +134,7 @@
 <section id="plugins">
 	<h1>Plugins</h1>
 	<p>Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.</p>
-	<ul></ul>
+	<ul class="plugin-list"></ul>
 	
 	<p>No assembly required to use them. Just select them in the <a href="download.html">download</a> page.</p>
 	<p>It’s very easy to <a href="extending.html#writing-plugins">write your own Prism plugins</a>. Did you write a plugin for Prism that you want added to this list? <a href="https://github.com/LeaVerou/prism" target="_blank">Send a pull request</a>!</p>
@@ -148,30 +155,6 @@
 <script src="prism.js" data-default-language="markup"></script>
 <script src="utopia.js"></script>
 <script src="code.js"></script>
-<script>
-(function(){
-var ul = $('#plugins ul');
-
-for (var id in components.plugins) {
-	if (id == 'meta') {
-		continue;
-	}
-	
-	var plugin = components.plugins[id];
-	
-	$u.element.create('li', {
-		contents: {
-			tag: 'a',
-			prop: {
-				href: components.plugins.meta.path.replace(/\{id}/g, id)
-			},
-			contents: plugin.title || plugin
-		},
-		inside: ul
-	});	
-}
-})();
-</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 9ff5807..8560004 100644
--- a/style.css
+++ b/style.css
@@ -65,7 +65,7 @@ section h1 {
 	
 	section h1 > a:hover:before {
 		color: black;
-		background: #e8d225;
+		background: #f1ad26;
 	}
 
 p {
@@ -143,7 +143,7 @@ header {
 	header h1 {
 		float: left;
 		margin-right: 30px;
-		color: #eda725;
+		color: #7fab14;
 		text-align: center;
 		font-size: 140%;
 		text-transform: uppercase;
@@ -152,7 +152,7 @@ header {
 	
 	header h2 {
 		margin-top: .5em;
-		color: #7fab14;
+		color: #f1ad26;
 	}
 	
 		header h1 a {
@@ -318,23 +318,28 @@ footer {
 
 #toc {
 	position: fixed;
-	left: 3em;
-	font-size: 75%;
+	left: 1%;
+	max-width: calc(48% - 450px);
+	font-size: 80%;
 	opacity: .3;
 }
 
-#toc:hover {
-	opacity: 1;
-}
-
 @media (max-width: 1200px) {
 	#toc {
 		 display: none;
 	}
 }
 
+#toc:hover {
+	opacity: 1;
+}
+
 	#toc h1 {
-		font-size: 200%;
+		font-size: 180%;
+	}
+	
+	#toc li {
+		list-style: none;
 	}
 	
 #logo:before {