kmx.io/prism.js

diff --git a/examples.html b/examples.html
index 56bcb41..da1a3dc 100644
--- a/examples.html
+++ b/examples.html
@@ -9,7 +9,7 @@
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
 <style>
 #languages {
-	column-count: 3
+	column-count: 4;
 }
 	#languages > h1 {
 		margin-top: 0;
@@ -19,10 +19,22 @@
 		display: block;
 		padding: .2em;
 	}
+	#languages .unavailable {
+		color: #aaa;
+	}
 	#languages input {
 		margin-right: .7em;
 	}
 
+#examples > section {
+	display: block;
+	margin: auto;
+	max-width: 900px;
+}
+	#examples h3 {
+		margin: 1em 0 0.3em;
+	}
+
 </style>
 <script src="prefixfree.min.js"></script>
 
@@ -76,7 +88,7 @@
 	<h1>Per language examples</h1>
 	<div id="languages"></div>
 </section>
-<section id="examples"></section>
+<div id="examples"></div>
 
 <section class="language-markup">
 	<h1>Markup</h1>
diff --git a/examples.js b/examples.js
index 0adbb20..d178525 100644
--- a/examples.js
+++ b/examples.js
@@ -4,15 +4,14 @@
 
 (function() {
 
-var cache = {};
-var dependencies = {};
+var examples = {};
 
 // TODO change treeURL before commit !
 var treeURL = 'https://api.github.com/repos/Golmote/prism/git/trees/prism-examples?recursive=1';
-var treePromise = new Promise(function(resolve) {
+var treePromise = new Promise(function (resolve) {
 	$u.xhr({
 		url: treeURL,
-		callback: function(xhr) {
+		callback: function (xhr) {
 			if (xhr.status < 400) {
 				resolve(JSON.parse(xhr.responseText).tree);
 			}
@@ -23,78 +22,161 @@ var treePromise = new Promise(function(resolve) {
 var languages = components.languages;
 
 for (var id in languages) {
-	if(id === 'meta') {
+	if (id === 'meta') {
 		continue;
 	}
 
-	var language = languages[id];
-	var checked = false;
-
-	if (language.option === 'default') {
-		checked = true;
-	}
+	(function (id) {
+		var language = languages[id];
+		var checked = false;
 
-	language.enabled = checked;
-	language.file = languages.meta.path.replace(/\{id}/g, id) + '.js';
-	language.examples = languages.meta.examplesPath.replace(/\{id}/g, id) + '.html';
+		if (language.option === 'default') {
+			checked = true;
+		}
 
-	if (language.require) {
-		dependencies[language.require] = (dependencies[language.require] || []).concat(id);
-	}
+		language.enabled = checked;
+		language.path = languages.meta.path.replace(/\{id}/g, id) + '.js';
+		language.examplesPath = languages.meta.examplesPath.replace(/\{id}/g, id) + '.html';
 
-	fileExists(language.examples).then(function() {
-		$u.element.create('label', {
-			attributes: {
-				'data-id': id
-			},
-			contents: [
-				{
-					tag: 'input',
-					properties: {
-						type: 'checkbox',
-						name: 'language',
-						value: id,
-						checked: checked,
-						onclick: (function (id) {
-							return function () {
+		fileExists(language.examplesPath).then(function (exists) {
+			$u.element.create('label', {
+				attributes: {
+					'data-id': id,
+					'title': !exists ? 'No examples are available for this language.' : ''
+				},
+				className: !exists ? 'unavailable' : '',
+				contents: [
+					{
+						tag: 'input',
+						properties: {
+							type: 'checkbox',
+							name: 'language',
+							value: id,
+							checked: checked && exists,
+							disabled: !exists,
+							onclick: function () {
 								$$('input[name="' + this.name + '"]').forEach(function (input) {
 									languages[input.value].enabled = input.checked;
 								});
 
 								update(id);
-							};
-						}(id))
-					}
-				},
-				language.title,
-				language.owner ? {
-					tag: 'a',
-					properties: {
-						href: 'http://github.com/' + language.owner,
-						className: 'owner',
-						target: '_blank'
+							}
+						}
 					},
-					contents: language.owner
-				} : ' '
-			],
-			inside: '#languages'
+					language.title
+				],
+				inside: '#languages'
+			});
+			examples[id] = $u.element.create('section', {
+				'id': 'language-' + id,
+				'className': 'language-' + id,
+				inside: '#examples'
+			});
+			if (checked) {
+				update(id);
+			}
 		});
-	});
+	}(id));
 }
 
 function fileExists(filepath) {
-	return treePromise.then(function(tree) {
-		for(var i=0, l=tree.length; i<l; i++) {
-			if(tree[i].path === filepath) {
+	return treePromise.then(function (tree) {
+		for (var i = 0, l = tree.length; i < l; i++) {
+			if (tree[i].path === filepath) {
 				return true;
 			}
 		}
-		throw 'File ' + filepath + ' does not exist';
+		return false;
+	});
+}
+
+function getFileContents(filepath) {
+	return new Promise(function (resolve, reject) {
+		$u.xhr({
+			url: filepath,
+			callback: function (xhr) {
+				if (xhr.status < 400 && xhr.responseText) {
+					resolve(xhr.responseText);
+				} else {
+					reject();
+				}
+			}
+		});
 	});
 }
 
 function update(id) {
-	console.log('Update '+id);
+	var language = languages[id];
+	if (language.enabled) {
+		if (!language.examplesPromise) {
+			language.examplesPromise = getFileContents(language.examplesPath);
+		}
+		language.examplesPromise.then(function (contents) {
+			examples[id].innerHTML = contents;
+
+			loadLanguage(id).then(function () {
+				var elements = examples[id].querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
+
+				for (var i=0, element; element = elements[i++];) {
+					Prism.highlightElement(element);
+				}
+			});
+		});
+	} else {
+		examples[id].innerHTML = '';
+	}
+}
+
+/**
+ * Loads a language, including all dependencies
+ *
+ * @param {string} lang the language to load
+ * @type {Promise} the promise which resolves as soon as everything is loaded
+ */
+function loadLanguage (lang)
+{
+	// at first we need to fetch all dependencies for the main language
+	// Note: we need to do this, even if the main language already is loaded (just to be sure..)
+	//
+	// We load an array of all dependencies and call recursively this function on each entry
+	//
+	// dependencies is now an (possibly empty) array of loading-promises
+	var dependencies = getDependenciesOfLanguage(lang).map(loadLanguage);
+
+	// We create a promise, which will resolve, as soon as all dependencies are loaded.
+	// They need to be fully loaded because the main language may extend them.
+	return Promise.all(dependencies)
+		.then(function () {
+
+			// If the main language itself isn't already loaded, load it now
+			// and return the newly created promise (we chain the promises).
+			// If the language is already loaded, just do nothing - the next .then()
+			// will immediately be called
+			if (!Prism.languages[lang]) {
+				return new Promise(function (resolve) {
+					$u.script('components/prism-' + lang + '.js', resolve);
+				});
+			}
+		});
+}
+
+
+/**
+ * Returns all dependencies (as identifiers) of a specific language
+ *
+ * @param {string} lang
+ * @returns {Array.<string>} the list of dependencies. Empty if the language has none.
+ */
+function getDependenciesOfLanguage (lang)
+{
+	if (!components.languages[lang] || !components.languages[lang].require)
+	{
+		return [];
+	}
+
+	return ($u.type(components.languages[lang].require) === "Array")
+		? components.languages[lang].require
+		: [components.languages[lang].require];
 }
 
 }());
\ No newline at end of file
diff --git a/examples/prism-css.html b/examples/prism-css.html
new file mode 100644
index 0000000..7249454
--- /dev/null
+++ b/examples/prism-css.html
@@ -0,0 +1,31 @@
+<h2>CSS</h2>
+<p>To use this language, use the class "language-css".</p>
+
+<h3>Empty rule</h3>
+<pre><code>*{} * {} p {}</code></pre>
+<pre><code>ul,
+ol {}</code></pre>
+
+<h3>Simple rule</h3>
+<pre><code>p { color: red; }</code></pre>
+
+<h3>Important rule</h3>
+<pre><code>p { color: red !important; }</code></pre>
+
+<h3>@ rule</h3>
+<pre><code>@media screen and (min-width: 100px) {}</code></pre>
+
+<h3>LESS variable</h3>
+<pre><code>@main-color: red;
+.foo {
+	background: @main-color;
+}</code></pre>
+
+<h3>Comment</h3>
+<pre><code>/* Simple comment here */</code></pre>
+
+<h3>String</h3>
+<pre><code>content: 'foo';</code></pre>
+
+<h3>URL</h3>
+<pre><code>content: url(foo.png);</code></pre>
\ No newline at end of file
diff --git a/examples/prism-javascript.html b/examples/prism-javascript.html
new file mode 100644
index 0000000..d7a8725
--- /dev/null
+++ b/examples/prism-javascript.html
@@ -0,0 +1,51 @@
+<h2>JavaScript</h2>
+<p>To use this language, use the class "language-javascript".</p>
+
+<h3>Variable assignment</h3>
+<pre><code>var foo = "bar", baz = 5;</code></pre>
+
+<h3>Operators</h3>
+<pre><code>(1 + 2 * 3)/4 >= 3 &amp;&amp; 4 &lt; 5 || 6 > 7</code></pre>
+
+<h3>Indented code</h3>
+<pre><code>if (true) {
+	while (true) {
+	doSomething();
+	}
+	}</code></pre>
+
+<h3>Regex with slashes</h3>
+<pre><code>var foo = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;</code></pre>
+
+<h3>Regex that ends with double slash</h3>
+<pre><code>var bar = /\/\*[\w\W]*?\*\//g;</code></pre>
+
+<h3>Single line comments &amp; regexes</h3>
+<pre><code>// http://lea.verou.me
+	var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
+
+<h3>Link in comment</h3>
+<pre><code>// http://lea.verou.me
+	/* http://lea.verou.me */</code></pre>
+
+<h3>Nested strings</h3>
+<pre><code>var foo = "foo", bar = "He \"said\" 'hi'!"</code></pre>
+
+<h3>Strings inside comments</h3>
+<pre><code>// "foo"</code></pre>
+<pre><code>/* "foo" */</code></pre>
+
+<h3>Strings with slashes</h3>
+<pre><code>env.content + '&lt;/' + env.tag + '>'</code></pre>
+<pre><code>var foo = "/" + "/";</code></pre>
+<pre><code>var foo = "http://prismjs.com"; // Strings are strings and comments are comments ;)</code></pre>
+
+<h3>Regex inside single line comment</h3>
+<pre><code>// hey, /this doesn’t fail!/ :D</code></pre>
+
+<h3>Two or more division operators on the same line</h3>
+<pre><code>var foo = 5 / 6 / 7;</code></pre>
+
+<h3>A division operator on the same line as a regex</h3>
+<pre><code>var foo = 1/2, bar = /a/g;</code></pre>
+<pre><code>var foo = /a/, bar = 3/4;</code></pre>
\ No newline at end of file
diff --git a/examples/prism-markup.html b/examples/prism-markup.html
index e69de29..e069143 100644
--- a/examples/prism-markup.html
+++ b/examples/prism-markup.html
@@ -0,0 +1,75 @@
+<h2>Markup</h2>
+<p>To use this language, use the class "language-markup".</p>
+
+<h3>Empty tag</h3>
+<pre><code>&lt;p>&lt;/p></code></pre>
+
+<h3>Tag that spans multiple lines</h3>
+<pre><code>&lt;p
+>hello!
+&lt;/p></code></pre>
+
+<h3>Name-attribute pair</h3>
+<pre><code>&lt;p>&lt;/p></code></pre>
+
+<h3>Name-attribute pair without quotes</h3>
+<pre><code>&lt;p class=prism>&lt;/p></code></pre>
+
+<h3>Attribute without value</h3>
+<pre><code>&lt;p data-foo>&lt;/p>
+&lt;p data-foo >&lt;/p>
+</code></pre>
+
+<h3>Namespaces</h3>
+<pre><code>&lt;html:p foo:bar="baz" foo:weee>&lt;/html:p></code></pre>
+
+<h3>XML prolog</h3>
+<pre><code>&lt;?xml version="1.0" encoding="utf-8"?>
+&lt;svg>&lt;/svg></code></pre>
+
+<h3>DOCTYPE</h3>
+<pre><code>&lt;!DOCTYPE html>
+&lt;html>&lt;/html></code></pre>
+
+<h3>CDATA section</h3>
+<pre><code>&lt;ns1:description>&lt;![CDATA[
+  CDATA is &lt;not> magical.
+]]>&lt;/ns1:description></code></pre>
+
+<h3>Comment</h3>
+<pre><code>&lt;!-- I'm a comment -->
+And i'm not</code></pre>
+
+<h3>Entities</h3>
+<pre><code>&amp;amp; &amp;#x2665; &amp;#160; &amp;#x152;</code></pre>
+
+<h3>Embedded JS and CSS</h3>
+<pre><code>&lt;!DOCTYPE html>
+&lt;html lang="en">
+&lt;head>
+	&lt;meta charset="utf-8" />
+	&lt;title>I can haz embedded CSS and JS&lt;/title>
+	&lt;style>
+		@media print {
+			p { color: red !important; }
+		}
+	&lt;/style>
+&lt;/head>
+&lt;body>
+	&lt;h1>I can haz embedded CSS and JS&lt;/h1>
+	&lt;script>
+	if (true) {
+		console.log('foo');
+	}
+	&lt;/script>
+
+&lt;/body>
+&lt;/html></code></pre>
+
+<h3>Invalid HTML</h3>
+<pre><code>&lt;l &lt;/ul></code></pre>
+
+<h3>Multi-line attribute values</h3>
+<pre><code>&lt;p title="foo
+bar
+baz"></code></pre>
\ No newline at end of file