kmx.io/prism.js

diff --git a/code.js b/code.js
index 2cd2984..cc2f871 100644
--- a/code.js
+++ b/code.js
@@ -1,55 +1,21 @@
-$$('iframe').forEach(function(iframe) {
-	(iframe.onload = function() {	
-		var doc = iframe.contentDocument,
-		    pre = $('pre', doc),
-		    language = /.css$/.test(iframe.src)? 'css' : 'javascript',
-		    depth = (iframe.getAttribute('src').match(/\//g) || []).length,
-		    pathPrefix = Array(depth + 1).join('../');
-
-		if(!pre) {
-			return;
+$$('pre[data-src]').forEach(function(pre) {
+	var src = pre.getAttribute('data-src');
+	
+	var language = {
+		'js': 'javascript',
+		'css': 'css',
+		'html': 'markup',
+		'svg': 'markup'
+	}[(src.match(/\.(\w+)$/) || [,''])[1]]
+	
+	pre.className = 'prism language-' + language;
+	
+	$u.xhr({
+		url: src,
+		callback: function(xhr) {
+			pre.textContent = xhr.responseText;
+			
+			Prism.highlight(pre, true);
 		}
-		
-		iframe.onload = null;
-
-		pre.className = 'prism language-' + language;
-		pre.style.whiteSpace = 'pre';
-		pre.style.wordWrap = 'normal';
-		
-		var height = doc.documentElement.offsetHeight;
-		if (height && iframe.offsetHeight > height) {
-			iframe.style.height = height + 'px';
-		}
-		
-		var link = {
-			tag: 'link',
-			properties: {
-				rel: 'stylesheet'
-			},
-			inside: $('head', doc)
-		}
-		
-		link.properties.href = 'style.css';
-		$u.element.create(link);
-		
-		link.properties.href = 'prism.css';
-		$u.element.create(link);
-		
-		link.properties.href = pathPrefix + 'style.css';
-		$u.element.create(link);
-		
-		link.properties.href = pathPrefix + 'prism.css';
-		$u.element.create(link);
-		
-		
-		Prism.highlight(pre);
-	})();
-});
-
-setTimeout(function(){
-	var code = $('code', innerHTML);
-	code.innerHTML = document.documentElement.innerHTML
-		.replace(/</g, '<')
-		.replace(/</g, '&lt;');
-	Prism.highlight(code);
-},1000);
+	});
+});
\ No newline at end of file
diff --git a/components/prism-markup.js b/components/prism-markup.js
index 79aa4d2..891cd11 100644
--- a/components/prism-markup.js
+++ b/components/prism-markup.js
@@ -1,5 +1,7 @@
 Prism.languages.markup = {
 	'comment': /&lt;!--[\w\W]*?--(>|&gt;)/g,
+	'prolog': /&lt;\?.+?\?(>|&gt;)/,
+	'doctype': /&lt;!DOCTYPE.+?(>|&gt;)/,
 	'script': null,
 	'style': null,
 	'tag': {
@@ -13,7 +15,7 @@ Prism.languages.markup = {
 				}
 			},
 			'attr-value': {
-				pattern: /=(('|").*?(\2)|[^\s>]+)/gi,
+				pattern: /=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,
 				inside: {
 					'punctuation': /=/g
 				}
diff --git a/examples.html b/examples.html
index f85d5f3..47acb00 100644
--- a/examples.html
+++ b/examples.html
@@ -31,6 +31,11 @@
 	<h2>Empty tag</h2>
 	<pre class="prism"><code class="language-markup">&lt;p>&lt;/p></code></pre>
 	
+	<h2>Tag that spans multiple lines</h2>
+	<pre class="prism"><code class="language-markup">&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>
 	
@@ -43,6 +48,14 @@
 	
 	<h2>Namespaces</h2>
 	<pre class="prism"><code class="language-markup">&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"?>
+&lt;svg>&lt;/svg></code></pre>
+
+	<h2>DOCTYPE</h2>
+	<pre class="prism"><code class="language-markup">&lt;!DOCTYPE html>
+&lt;html>&lt;/html></code></pre>
 </pre>
 </section>
 
diff --git a/index.html b/index.html
index 743898a..1ab9180 100644
--- a/index.html
+++ b/index.html
@@ -64,13 +64,16 @@
 <section id="examples">
 	<h1>Examples</h1>
 	<p>The Prism source, highlighted with Prism (don’t you just love how meta this is?):</p>
-	<iframe src="prism.js"></iframe>
+	<pre data-src="prism.js"></pre>
 	
 	<p>This page’s CSS code, highlighted with Prism:</p>
-	<iframe src="style.css"></iframe>
+	<pre data-src="style.css"></pre>
 	
-	<p>And this page’s innerHTML, highlighted with Prism:</p>
-	<pre id="innerHTML" class="prism"><code class="language-markup"></code></pre>
+	<p>This page’s HTML, highlighted with Prism:</p>
+	<pre data-src="index.html"></pre>
+	
+	<p>This page’s logo (SVG), highlighted with Prism:</p>
+	<pre data-src="logo.svg"></pre>
 </section>
 
 <section id="how-to-use">
@@ -97,12 +100,12 @@
 	<h1>Language definitions</h1>
 	
 	<p>Every language is defined as a set of tokens, which are expressed as regular expressions. For example, this is the language definition for JavaScript:</p>
-	<iframe src="components/prism-javascript.js"></iframe>
+	<pre data-src="components/prism-javascript.js"></pre>
 	
  	<p>Each token cannot contain other tokens, so their order is significant. Although per the ECMAScript specification, objects are not required to have a specific ordering of their properties, in practice they do in every modern browser.</p>
  	<p>In some cases, it’s easier to define a language when certain tokens can only be nested inside other tokens. This is allowed by using an object as the token value, instead of a regular expression. This object has a <code>pattern</code> property,
  	which contains the regular expression that describes the entire token and an <code>inside</code> property that contains the tokens that can be nested inside that token. For example, the tokens for HTML are defined in that way:</p>
- 	<iframe src="components/prism-html.js"></iframe>
+ 	<pre data-src="components/prism-markup.js"></pre>
 </section>
 
 <section id="api">
diff --git a/logo.svg b/logo.svg
index ded2b92..6a1cac3 100644
--- a/logo.svg
+++ b/logo.svg
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="170px" viewBox="0 0 200 170">
-<g>
-	<path fill="#FFFFFF" d="M55.371,131.506h-6.976v9.12h6.976c1.664,0,2.923-0.405,3.776-1.216c0.853-0.811,1.28-1.925,1.28-3.344
+<g fill="white">
+	<path d="M55.371,131.506h-6.976v9.12h6.976c1.664,0,2.923-0.405,3.776-1.216c0.853-0.811,1.28-1.925,1.28-3.344
 		s-0.427-2.533-1.28-3.345C58.293,131.911,57.035,131.506,55.371,131.506z"/>
-	<path fill="#FFFFFF" d="M84.894,137.906c0.32-0.533,0.48-1.216,0.48-2.048c0-1.345-0.459-2.405-1.376-3.185
+	<path d="M84.894,137.906c0.32-0.533,0.48-1.216,0.48-2.048c0-1.345-0.459-2.405-1.376-3.185
 		c-0.917-0.778-2.134-1.168-3.648-1.168h-7.456v8.512h7.328C82.483,140.018,84.041,139.314,84.894,137.906z"/>
-	<path fill="#FFFFFF" d="M100,0L0,170h200L100,0z M60.859,141.026c-1.312,1.227-3.088,1.84-5.328,1.84h-7.136v7.552h-2.4v-21.184
+	<path d="M100,0L0,170h200L100,0z M60.859,141.026c-1.312,1.227-3.088,1.84-5.328,1.84h-7.136v7.552h-2.4v-21.184
 		h9.536c2.24,0,4.021,0.618,5.344,1.855c1.301,1.237,1.952,2.892,1.952,4.96C62.827,138.141,62.171,139.8,60.859,141.026z
 		 M85.374,150.418l-5.12-8.128h-7.36v8.128h-2.4v-21.184h10.144c2.155,0,3.883,0.597,5.184,1.792
 		c1.301,1.173,1.952,2.783,1.952,4.832c0,2.646-1.099,4.447-3.296,5.407c-0.619,0.278-1.227,0.48-1.824,0.608l5.568,8.544H85.374z
diff --git a/prism.css b/prism.css
index e05647b..a5600d8 100644
--- a/prism.css
+++ b/prism.css
@@ -24,7 +24,9 @@ pre.prism {
 }
 
 .comment,
-.line-comment {
+.line-comment,
+.prolog,
+.doctype {
 	color: slategray;
 }
 
diff --git a/prism.js b/prism.js
index 1d18a83..045d7c3 100644
--- a/prism.js
+++ b/prism.js
@@ -219,6 +219,8 @@ Prism.languages.javascript = {
 
 Prism.languages.markup = {
 	'comment': /&lt;!--[\w\W]*?--(>|&gt;)/g,
+	'prolog': /&lt;\?.+?\?(>|&gt;)/,
+	'doctype': /&lt;!DOCTYPE.+?(>|&gt;)/,
 	'script': null,
 	'style': null,
 	'tag': {
@@ -232,7 +234,7 @@ Prism.languages.markup = {
 				}
 			},
 			'attr-value': {
-				pattern: /=(('|").*?(\2)|[^\s>]+)/gi,
+				pattern: /=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,
 				inside: {
 					'punctuation': /=/g
 				}
diff --git a/style.css b/style.css
index 890686a..97faf15 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,8 @@
-@import url(http://fonts.googleapis.com/css?family=Questrial);
+@import url(http://fonts.googleapis.com/css?family=Questrial);*/
 
 /*
  Shared styles
- */
+ 
 h1,
 #features li strong {
 	font: italic 100% Baskerville, Palatino Linotype, Georgia, serif;
@@ -68,6 +68,10 @@ code, pre {
 	hyphens: none;
 }
 
+pre {
+	max-height: 30em;
+}
+
 	body > pre:only-child {
 		padding: 1em;
 		min-height: 100%;