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.
You can download all the available grammars by clicking on the following link: .
Alternatively, you can also clone the GitHub repo and take the components folder from there.
Read our usage section to use a CDN.
You can then download Prism core and any plugins from the Download 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).
A couple of additional options are available through the configuration object Prism.plugins.autoloader.
By default, the plugin will look for the missing grammars in the components folder.
If your files are in a different location, you can specify it using the languages_path option:
Prism.plugins.autoloader.languages_path = 'path/to/grammars/';Note: Autoloader is pretty good at guessing this path. You most likely won't have to change this path.
By default, the plugin uses the minified versions of the grammars.
If you wish to use the development versions instead, you can set the use_minified option to false:
Prism.plugins.autoloader.use_minified = false;
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 data-dependencies attribute on you <code> or <pre> tags,
containing a list of comma-separated language aliases.
<pre><code class="language-pug" data-dependencies="less">
:less
foo {
color: @red;
}
</code><pre>
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 data-dependencies attribute,
this language will be reloaded.
<pre class="language-markup" data-dependencies="markup,css!"><code>Note that no languages are loaded on this page by default.
Basic usage with some Perl code:
my ($class, $filename) = @_;Alias support with TypeScript's ts:
const a: number = 0;The Less filter used in Pug:
:less
foo {
color: @red;
}Markdown will use the Autoloader to automatically load missing languages.
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;
}
```