205 lines
6.0 KiB
HTML
205 lines
6.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<link rel="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 />
|
||
|
|
<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="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>
|
||
|
|
<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 plugin will automatically handle missing grammars and load them for you.
|
||
|
|
To do this, you need to provide it with a directory of all the grammars you want.
|
||
|
|
</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.
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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><code></code> or <code><pre></code> tags,
|
||
|
|
containing a list of comma-separated language aliases.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<pre><code class="language-markup"><pre><code class="language-pug" data-dependencies="less">
|
||
|
|
:less
|
||
|
|
foo {
|
||
|
|
color: @red;
|
||
|
|
}
|
||
|
|
</code><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"><pre class="language-markup" data-dependencies="markup,css!"><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 Pug:</p>
|
||
|
|
<pre><code class="language-pug" 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" data-autoloader-path="components"></script>
|
||
|
|
<script src="utopia.js"></script>
|
||
|
|
<script src="components.js"></script>
|
||
|
|
<script src="code.js"></script>
|
||
|
|
|
||
|
|
<script src="vendor/promise.js"></script>
|
||
|
|
<script src="vendor/jszip.min.js"></script>
|
||
|
|
<script src="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>
|