2015-09-10 15:09:03 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
2020-06-28 07:58:55 +08:00
< link rel = "icon" href = "assets/favicon.png" / >
2015-09-10 15:09:03 +08:00
< title > Autoloader ▲ Prism plugins< / title >
< base href = "../.." / >
2020-06-28 07:58:55 +08:00
< link rel = "stylesheet" href = "assets/style.css" / >
2015-09-10 15:09:03 +08:00
< link rel = "stylesheet" href = "themes/prism.css" data-noprefix / >
2016-06-18 21:45:25 +08:00
< style >
.download-grammars {
font: inherit;
border: 0;
padding: 0;
margin: 0;
background: none;
text-decoration: underline;
cursor: pointer;
}
.download-grammars.loading:after {
2016-07-04 14:59:15 +08:00
content: ' [Generating... ' attr(data-progress) '%]';
2016-06-18 21:45:25 +08:00
}
< / style >
2021-05-01 20:57:39 +08:00
< script src = "assets/vendor/prefixfree.min.js" > < / script >
2015-09-10 15:09:03 +08:00
< script > var _gaq = [ [ '_setAccount' , 'UA-33746269-1' ] , [ '_trackPageview' ] ] ; < / script >
2018-04-17 06:28:42 +08:00
< script src = "https://www.google-analytics.com/ga.js" async > < / script >
2015-09-10 15:09:03 +08:00
< / head >
< body >
2019-10-01 01:43:33 +08:00
< header data-plugin-header = "autoloader" > < / header >
2015-09-10 15:09:03 +08:00
< section class = "language-javascript" >
< h1 > How to use< / h1 >
< p >
2016-06-18 21:01:08 +08:00
The plugin will automatically handle missing grammars and load them for you.
2016-06-18 21:45:25 +08:00
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.
2016-06-18 21:01:08 +08:00
< / 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 > .
2015-09-10 15:09:03 +08:00
< / 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 >
2017-10-10 12:05:49 +08:00
< pre > < code class = "language-markup" > < pre>< code class="language-pug" data-dependencies="less">
2015-09-10 15:09:03 +08:00
:less
foo {
color: @red;
}
< /code>< pre>< / code > < / pre >
< h2 > Force to reload a grammar< / h2 >
< p >
2016-06-18 21:01:08 +08:00
The plugin usually doesn't reload a grammar if it already exists.
2015-09-10 15:09:03 +08:00
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 >
2019-03-25 01:52:44 +08:00
< p > Alias support with TypeScript's < code class = "language-none" > ts< / code > :< / p >
< pre > < code class = "language-ts" > const a: number = 0;< / code > < / pre >
2017-10-10 12:10:04 +08:00
< p > The Less filter used in Pug:< / p >
2017-10-10 12:05:49 +08:00
< pre > < code class = "language-pug" data-dependencies = "less" > :less
2015-09-10 15:09:03 +08:00
foo {
color: @red;
}< / code > < / pre >
< / section >
2019-07-22 08:07:42 +08:00
< 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< int> {
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 >
2020-06-28 07:58:55 +08:00
< footer data-src = "assets/templates/footer.html" data-type = "text/html" > < / footer >
2015-09-10 15:09:03 +08:00
< script src = "components/prism-core.js" > < / script >
2019-07-22 02:06:02 +08:00
< script src = "plugins/autoloader/prism-autoloader.js" > < / script >
2021-05-01 20:57:39 +08:00
< script src = "assets/vendor/utopia.js" > < / script >
2015-09-10 15:09:03 +08:00
< script src = "components.js" > < / script >
2020-06-28 07:58:55 +08:00
< script src = "assets/code.js" > < / script >
2015-09-10 15:09:03 +08:00
2020-06-28 07:58:55 +08:00
< script src = "assets/vendor/promise.js" > < / script >
< script src = "assets/vendor/jszip.min.js" > < / script >
< script src = "assets/vendor/FileSaver.min.js" > < / script >
2016-06-18 21:45:25 +08:00
< script >
2016-07-04 14:59:15 +08:00
function getZip(files, elt) {
2016-06-18 21:45:25 +08:00
return new Promise(function (resolve, reject) {
var zip = new JSZip();
var l = files.length;
var i = 0;
var process = function () {
2016-07-04 14:59:15 +08:00
elt.setAttribute('data-progress', Math.round(i / l * 100));
2016-06-18 21:45:25 +08:00
if (i < l ) {
addFile(zip, files[i][0], files[i][1]).then(function () {
i++;
process();
});
} else {
resolve(zip);
}
};
process();
});
}
2016-07-04 14:59:15 +08:00
2016-06-18 21:45:25 +08:00
function addFile(zip, filename, filepath) {
return getFileContents(filepath).then(function (contents) {
zip.file(filename, contents);
});
}
2016-07-04 14:59:15 +08:00
2016-06-18 21:45:25 +08:00
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;
2016-07-04 14:59:15 +08:00
if (btn.classList.contains('loading')) {
return;
}
2016-06-18 21:45:25 +08:00
btn.classList.add('loading');
2016-07-04 14:59:15 +08:00
btn.setAttribute('data-progress', 0);
2016-06-18 21:45:25 +08:00
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']);
}
2016-07-04 14:59:15 +08:00
getZip(files, btn).then(function (zip) {
2016-06-18 21:45:25 +08:00
btn.classList.remove('loading');
return zip.generateAsync({type: 'blob'});
}).then(function (blob) {
saveAs(blob, 'prism-components.zip');
});
});
< / script >
2015-09-10 15:09:03 +08:00
< / body >
2017-10-10 12:05:49 +08:00
< / html >