Merge pull request #766 from Golmote/prism-autoload

Autoloader Plugin
PrismJS · Sep 22, 2015 · ed4ccfe · ed4ccfe
2 parents b2763e7 + b9a48c0
commit ed4ccfe
Show file tree

Hide file tree

Showing 5 changed files with 343 additions and 12 deletions.
diff --git a/components.js b/components.js
@@ -500,6 +500,11 @@ var components = {
 			"title": "Previewer: Color",
 			"require": "previewer-base",
 			"owner": "Golmote"
+		},
+		"autoloader": {
+			"title": "Autoloader",
+			"owner": "Golmote",
+			"noCSS": true
 		}
 	}
 };
diff --git a/gulpfile.js b/gulpfile.js
@@ -18,7 +18,8 @@ var gulp   = require('gulp'),
 			'plugins/file-highlight/prism-file-highlight.js'
 		],
 		plugins: ['plugins/**/*.js', '!plugins/**/*.min.js'],
-		showLanguagePlugin: 'plugins/show-language/prism-show-language.js'
+		showLanguagePlugin: 'plugins/show-language/prism-show-language.js',
+		autoloaderPlugin: 'plugins/autoloader/prism-autoloader.js'
 	};
 
 gulp.task('components', function() {
@@ -37,7 +38,7 @@ gulp.task('build', function() {
 		.pipe(gulp.dest('./'));
 });
 
-gulp.task('plugins', ['show-language-plugin'], function() {
+gulp.task('plugins', ['languages-plugins'], function() {
 	return gulp.src(paths.plugins)
 		.pipe(uglify())
 		.pipe(rename({ suffix: '.min' }))
@@ -49,7 +50,7 @@ gulp.task('watch', function() {
 	gulp.watch(paths.plugins, ['plugins', 'build']);
 });
 
-gulp.task('show-language-plugin', function (cb) {
+gulp.task('languages-plugins', function (cb) {
 	fs.readFile(paths.componentsFile, {
 		encoding: 'utf-8'
 	}, function (err, data) {
@@ -59,25 +60,49 @@ gulp.task('show-language-plugin', function (cb) {
 				data = JSON.parse(data);
 
 				var languagesMap = {};
+				var dependenciesMap = {};
 				for (var p in data.languages) {
 					if (p !== 'meta') {
 						var title = data.languages[p].displayTitle || data.languages[p].title;
 						var ucfirst = p.substring(0, 1).toUpperCase() + p.substring(1);
 						if (title !== ucfirst) {
 							languagesMap[p] = title;
 						}
+
+						if(data.languages[p].require) {
+							dependenciesMap[p] = data.languages[p].require;
+						}
 					}
 				}
 
-				var jsonLanguages = JSON.stringify(languagesMap);
-				var stream = gulp.src(paths.showLanguagePlugin)
-					.pipe(replace(
-						/\/\*languages_placeholder\[\*\/[\s\S]*?\/\*\]\*\//,
-						'/*languages_placeholder[*/' + jsonLanguages + '/*]*/'
-					))
-					.pipe(gulp.dest(paths.showLanguagePlugin.substring(0, paths.showLanguagePlugin.lastIndexOf('/'))));
-				stream.on('error', cb);
-				stream.on('end', cb);
+				var jsonLanguagesMap = JSON.stringify(languagesMap);
+				var jsonDependenciesMap = JSON.stringify(dependenciesMap);
+
+				var tasks = [
+					{plugin: paths.showLanguagePlugin, map: jsonLanguagesMap},
+					{plugin: paths.autoloaderPlugin, map: jsonDependenciesMap}
+				];
+
+				var cpt = 0;
+				var l = tasks.length;
+				var done = function() {
+					cpt++;
+					if(cpt === l) {
+						cb && cb();
+					}
+				};
+
+				tasks.forEach(function(task) {
+					var stream = gulp.src(task.plugin)
+						.pipe(replace(
+							/\/\*languages_placeholder\[\*\/[\s\S]*?\/\*\]\*\//,
+							'/*languages_placeholder[*/' + task.map + '/*]*/'
+						))
+						.pipe(gulp.dest(task.plugin.substring(0, task.plugin.lastIndexOf('/'))));
+
+					stream.on('error', done);
+					stream.on('end', done);
+				});
 
 			} catch (e) {
 				cb(e);

diff --git a/plugins/autoloader/index.html b/plugins/autoloader/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8" />
+<link rel="shortcut icon" href="favicon.png" />
+<title>Autoloader ▲ Prism plugins</title>
+<base href="../.." />
+<link rel="stylesheet" href="style.css" />
+<link rel="stylesheet" href="themes/prism.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>Autoloader</h2>
+	<p>Automatically loads the needed languages to highlight the code blocks.</p>
+</header>
+
+<section class="language-javascript">
+	<h1>How to use</h1>
+
+	<p>
+		The default usage does not require anything to be done. The plugin will automatically handle missing grammars and load them for you.
+		However, a couple of options are available through the configuration object <code>Prism.plugins.autoloader</code>.
+	</p>
+
+	<h2>Specifying the grammars path</h2>
+
+	<p>
+		By default, the plugin will look for the missing grammars in the <code>components</code> folder.
+		If your files are in a different location, you can specify it using the <code>languages_path</code> option:
+	</p>
+
+	<pre><code>Prism.plugins.autoloader.languages_path = 'path/to/grammars/';</code></pre>
+
+	<h2>Using development versions</h2>
+
+	<p>
+		By default, the plugin uses the minified versions of the grammars.
+		If you wish to use the development versions instead, you can set the <code>use_minified</code> option to false:
+	</p>
+
+	<pre><code>Prism.plugins.autoloader.use_minified = false;</code></pre>
+
+	<h2>Specifying additional dependencies</h2>
+
+	<p>
+		All default dependencies are already included in the plugin.
+		However, there are some cases where you might want to load an additional dependency for a specific code block.
+		To do so, just add a <code>data-dependencies</code> attribute on you <code>&lt;code></code> or <code>&lt;pre></code> tags,
+		containing a list of comma-separated language aliases.
+	</p>
+
+	<pre><code class="language-markup">&lt;pre>&lt;code class="language-jade" data-dependencies="less">
+:less
+	foo {
+		color: @red;
+	}
+&lt;/code>&lt;pre></code></pre>
+
+	<h2>Force to reload a grammar</h2>
+
+	<p>
+		The plugin usually don't reload a grammar if it already exists.
+		In some very specific cases, you might however want to do so.
+		If you add an exclamation mark after an alias in the <code>data-dependencies</code> attribute,
+		this language will be reloaded.
+	</p>
+
+	<pre><code class="language-markup">&lt;pre class="language-markup" data-dependencies="markup,css!">&lt;code></code></pre>
+
+</section>
+
+<section>
+	<h1>Examples</h1>
+
+	<p>Note that no languages are loaded on this page by default.</p>
+
+	<p>Basic usage with some Perl code:</p>
+	<pre><code class="language-perl">my ($class, $filename) = @_;</code></pre>
+
+	<p>The Less filter used in Jade:</p>
+	<pre><code class="language-jade" data-dependencies="less">:less
+	foo {
+		color: @red;
+	}</code></pre>
+
+</section>
+
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="components/prism-core.js"></script>
+<script src="plugins/autoloader/prism-autoloader.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+
+</body>
+</html>