Merge pull request #996 from Golmote/data-uri-highlight

Data-URI Highlight plugin Fix #485
PrismJS · Jul 14, 2016 · bdca61b · bdca61b
2 parents 1b19ff0 + b6ab75b
commit bdca61b
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 27 deletions.
diff --git a/components.js b/components.js
@@ -645,6 +645,11 @@ var components = {
 			"owner": "zeitgeist87",
 			"after": "unescaped-markup",
 			"noCSS": true
+		},
+		"data-uri-highlight": {
+			"title": "Data-URI Highlight",
+			"owner": "Golmote",
+			"noCSS": true
 		}
 	}
 };
diff --git a/plugins/autolinker/prism-autolinker.js b/plugins/autolinker/prism-autolinker.js
@@ -14,36 +14,42 @@ var url = /\b([a-z]{3,7}:\/\/|tel:)[\w\-+%~/.:#=?&amp;]+/,
 	// Tokens that may contain URLs and emails
     candidates = ['comment', 'url', 'attr-value', 'string'];
 
-Prism.hooks.add('before-highlight', function(env) {
-	// Abort if grammar has already been processed
-	if (!env.grammar || env.grammar['url-link']) {
-		return;
-	}
-	Prism.languages.DFS(env.grammar, function (key, def, type) {
-		if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
-			if (!def.pattern) {
-				def = this[key] = {
-					pattern: def
-				};
-			}
+Prism.plugins.autolinker = {
+	processGrammar: function (grammar) {
+		// Abort if grammar has already been processed
+		if (!grammar || grammar['url-link']) {
+			return;
+		}
+		Prism.languages.DFS(grammar, function (key, def, type) {
+			if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
+				if (!def.pattern) {
+					def = this[key] = {
+						pattern: def
+					};
+				}
 
-			def.inside = def.inside || {};
+				def.inside = def.inside || {};
 
-			if (type == 'comment') {
-				def.inside['md-link'] = linkMd;
-			}
-			if (type == 'attr-value') {
-				Prism.languages.insertBefore('inside', 'punctuation', { 'url-link': url }, def);
-			}
-			else {
-				def.inside['url-link'] = url;
+				if (type == 'comment') {
+					def.inside['md-link'] = linkMd;
+				}
+				if (type == 'attr-value') {
+					Prism.languages.insertBefore('inside', 'punctuation', { 'url-link': url }, def);
+				}
+				else {
+					def.inside['url-link'] = url;
+				}
+
+				def.inside['email-link'] = email;
 			}
+		});
+		grammar['url-link'] = url;
+		grammar['email-link'] = email;
+	}
+};
 
-			def.inside['email-link'] = email;
-		}
-	});
-	env.grammar['url-link'] = url;
-	env.grammar['email-link'] = email;
+Prism.hooks.add('before-highlight', function(env) {
+	Prism.plugins.autolinker.processGrammar(env.grammar);
 });
 
 Prism.hooks.add('wrap', function(env) {

diff --git a/plugins/autolinker/prism-autolinker.min.js b/plugins/autolinker/prism-autolinker.min.js
diff --git a/plugins/data-uri-highlight/index.html b/plugins/data-uri-highlight/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8" />
+<link rel="shortcut icon" href="favicon.png" />
+<title>Data-URI Highlight ▲ Prism plugins</title>
+<base href="../.." />
+<link rel="stylesheet" href="style.css" />
+<link rel="stylesheet" href="themes/prism.css" data-noprefix />
+<link rel="stylesheet" href="plugins/autolinker/prism-autolinker.css" data-noprefix />
+<script src="prefixfree.min.js"></script>
+
+<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
+<script src="http://www.google-analytics.com/ga.js" async></script>
+</head>
+<body>
+
+<header>
+	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
+
+	<h2>Data-URI Highlight</h2>
+	<p>Highlights data-URI contents.</p>
+</header>
+
+<section>
+	<h1>How to use</h1>
+	<p>Data-URIs will be highlighted automatically, provided the needed grammar is loaded.
+	The grammar to use is guessed using the MIME type information.</p>
+</section>
+
+<section>
+	<h1>Example</h1>
+
+	<pre><code class="language-css">div {
+    border: 40px solid transparent;
+    border-image: 33.334% url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"> \
+                          &lt;circle cx="5" cy="5" r="5" fill="%23ab4"/>&lt;circle cx="15" cy="5" r="5" fill="%23655"/> \
+                          &lt;circle cx="25" cy="5" r="5" fill="%23e07"/>&lt;circle cx="5" cy="15" r="5" fill="%23655"/> \
+                          &lt;circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"/> \
+                          &lt;circle cx="25" cy="15" r="5" fill="%23655"/>&lt;circle cx="5" cy="25" r="5" fill="%23fb3"/> \
+                          &lt;circle cx="15" cy="25" r="5" fill="%23655"/>&lt;circle cx="25" cy="25" r="5" fill="%2358a"/>&lt;/svg>');
+    padding: 1em;
+    max-width: 20em;
+    font: 130%/1.6 Baskerville, Palatino, serif;
+}</code></pre>
+
+</section>
+
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="prism.js"></script>
+<script src="plugins/data-uri-highlight/prism-data-uri-highlight.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+
+</body>
+</html>
diff --git a/plugins/data-uri-highlight/prism-data-uri-highlight.js b/plugins/data-uri-highlight/prism-data-uri-highlight.js
@@ -0,0 +1,98 @@
+(function () {
+
+	if (
+		typeof self !== 'undefined' && !self.Prism ||
+		typeof global !== 'undefined' && !global.Prism
+	) {
+		return;
+	}
+
+	var autoLinkerProcess = function (grammar) {
+		if (Prism.plugins.autolinker) {
+			Prism.plugins.autolinker.processGrammar(grammar);
+		}
+		return grammar;
+	};
+	var dataURI = {
+		pattern: /(.)\bdata:[^\/]+\/[^,]+,(?:(?!\1)[\s\S]|\\\1)+(?=\1)/,
+		lookbehind: true,
+		inside: {
+			'language-css': {
+				pattern: /(data:[^\/]+\/(?:[^+,]+\+)?css,)[\s\S]+/,
+				lookbehind: true
+			},
+			'language-javascript': {
+				pattern: /(data:[^\/]+\/(?:[^+,]+\+)?javascript,)[\s\S]+/,
+				lookbehind: true
+			},
+			'language-json': {
+				pattern: /(data:[^\/]+\/(?:[^+,]+\+)?json,)[\s\S]+/,
+				lookbehind: true
+			},
+			'language-markup': {
+				pattern: /(data:[^\/]+\/(?:[^+,]+\+)?(?:html|xml),)[\s\S]+/,
+				lookbehind: true
+			}
+		}
+	};
+
+	// Tokens that may contain URLs
+	var candidates = ['url', 'attr-value', 'string'];
+
+	Prism.plugins.dataURIHighlight = {
+		processGrammar: function (grammar) {
+			// Abort if grammar has already been processed
+			if (!grammar || grammar['data-uri']) {
+				return;
+			}
+
+			Prism.languages.DFS(grammar, function (key, def, type) {
+				if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
+					if (!def.pattern) {
+						def = this[key] = {
+							pattern: def
+						};
+					}
+
+					def.inside = def.inside || {};
+
+					if (type == 'attr-value') {
+						Prism.languages.insertBefore('inside', def.inside['url-link'] ? 'url-link' : 'punctuation', {
+							'data-uri': dataURI
+						}, def);
+					}
+					else {
+						if (def.inside['url-link']) {
+							Prism.languages.insertBefore('inside', 'url-link', {
+								'data-uri': dataURI
+							}, def);
+						} else {
+							def.inside['data-uri'] = dataURI;
+						}
+					}
+				}
+			});
+			grammar['data-uri'] = dataURI;
+		}
+	};
+
+	Prism.hooks.add('before-highlight', function (env) {
+		// Prepare the needed grammars for this code block
+		if (dataURI.pattern.test(env.code)) {
+			for (var p in dataURI.inside) {
+				if (dataURI.inside.hasOwnProperty(p)) {
+					if (!dataURI.inside[p].inside && dataURI.inside[p].pattern.test(env.code)) {
+						var lang = p.match(/^language-(.+)/)[1];
+						if (Prism.languages[lang]) {
+							dataURI.inside[p].inside = {
+								rest: autoLinkerProcess(Prism.languages[lang])
+							};
+						}
+					}
+				}
+			}
+		}
+
+		Prism.plugins.dataURIHighlight.processGrammar(env.grammar);
+	});
+}());
diff --git a/plugins/data-uri-highlight/prism-data-uri-highlight.min.js b/plugins/data-uri-highlight/prism-data-uri-highlight.min.js