kmx git

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Autoloader ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<style>
	.download-grammars {
		font: inherit;
		border: 0;
		padding: 0;
		margin: 0;
		background: none;
		text-decoration: underline;
		cursor: pointer;
	}
	.download-grammars.loading:after {
		content: ' [Generating... ' attr(data-progress) '%]';
	}
</style>
<script src="assets/vendor/prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>

<header data-plugin-header="autoloader"></header>

<section class="language-javascript">
	<h1>How to use</h1>

	<p>
		The plugin will automatically handle missing grammars and load them for you.
		To do this, you need to provide a URL to a directory of all the grammars you want.
		This can be the path to a local directory with all grammars or a CDN URL.
	</p>
	<p>
		You can download all the available grammars by clicking on the following link: <button class="download-grammars" type="button">download all grammars</button>.<br />
		Alternatively, you can also clone the GitHub repo and take the <code>components</code> folder from there.
		Read our <a href="index.html#basic-usage-cdn">usage section</a> to use a CDN.
	</p>
	<p>
		You can then download Prism core and any plugins from the <a href="download.html">Download</a> page, without checking any languages (or just check the languages you want to load by default, e.g. if you're using a language a lot, then you probably want to save the extra HTTP request).
	</p>
	<p>
		A couple of additional 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>

	<p>
		<em>Note:</em> Autoloader is pretty good at guessing this path. You most likely won't have to change this path.
	</p>

	<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-pug" data-dependencies="less">
:less
	foo {
		color: @red;
	}
&lt;/code>&lt;pre></code></pre>

	<h2>Force to reload a grammar</h2>

	<p>
		The plugin usually doesn'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>Alias support with TypeScript's <code class="language-none">ts</code>:</p>
	<pre><code class="language-ts">const a: number = 0;</code></pre>

	<p>The Less filter used in Pug:</p>
	<pre><code class="language-pug" data-dependencies="less">:less
	foo {
		color: @red;
	}</code></pre>

</section>

<section>
	<h1>Markdown</h1>

	<p>Markdown will use the Autoloader to automatically load missing languages.</p>
	<pre><code class="language-markdown">The C# code will be highlighted __after__ the rest of this document.

```csharp
public class Foo : IBar&lt;int&gt; {
	public string Baz { get; set; } = "foo";
}
```

The CSS code will be highlighted with this document because CSS has already been loaded.

```css
a:hover {
	color: green !important;
}
```</code></pre>

</section>

<footer data-src="assets/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="assets/vendor/utopia.js"></script>
<script src="components.js"></script>
<script src="assets/code.js"></script>

<script src="assets/vendor/promise.js"></script>
<script src="assets/vendor/jszip.min.js"></script>
<script src="assets/vendor/FileSaver.min.js"></script>
<script>
	function getZip(files, elt) {
		return new Promise(function (resolve, reject) {
			var zip = new JSZip();
			var l = files.length;
			var i = 0;
			var process = function () {
				elt.setAttribute('data-progress', Math.round(i / l * 100));
				if (i < l) {
					addFile(zip, files[i][0], files[i][1]).then(function () {
						i++;
						process();
					});
				} else {
					resolve(zip);
				}
			};
			process();
		});
	}

	function addFile(zip, filename, filepath) {
		return getFileContents(filepath).then(function (contents) {
			zip.file(filename, contents);
		});
	}

	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 {
						// Never rejected, ignore errors
						resolve();
					}
				}
			});
		});
	}

	$('.download-grammars').addEventListener('click', function () {
		var btn = this;
		if (btn.classList.contains('loading')) {
			return;
		}
		btn.classList.add('loading');
		btn.setAttribute('data-progress', 0);

		var files = [];
		for (var id in components.languages) {
			if (id === 'meta') {
				continue;
			}
			var basepath = components.languages.meta.path.replace(/\{id}/g, id);
			var basename = basepath.substring(basepath.lastIndexOf('/') + 1);
			files.push([basename + '.js', basepath + '.js']);
			files.push([basename + '.min.js', basepath + '.min.js']);
		}

		getZip(files, btn).then(function (zip) {
			btn.classList.remove('loading');
			return zip.generateAsync({type: 'blob'});
		}).then(function (blob) {
			saveAs(blob, 'prism-components.zip');
		});
	});

</script>

</body>
</html>
kmx.io/prism.js/plugins/autoloader/index.html

Commit

plugins/autoloader/index.html
