|
| 1 | +--- |
| 2 | +title: Autoloader |
| 3 | +description: Automatically loads the needed languages to highlight the code blocks. |
| 4 | +owner: Golmote |
| 5 | +noCSS: true |
| 6 | +resources: |
| 7 | + - /components.js |
| 8 | + - https://prismjs.com/assets/vendor/jszip.min.js |
| 9 | + - https://prismjs.com/assets/vendor/FileSaver.min.js |
| 10 | +--- |
| 11 | + |
| 12 | +<style> |
| 13 | + .download-grammars { |
| 14 | + font: inherit; |
| 15 | + border: 0; |
| 16 | + padding: 0; |
| 17 | + margin: 0; |
| 18 | + background: none; |
| 19 | + text-decoration: underline; |
| 20 | + cursor: pointer; |
| 21 | + |
| 22 | + &.loading:after { |
| 23 | + content: " [Generating... " attr(data-progress) "%]"; |
| 24 | + } |
| 25 | + } |
| 26 | +</style> |
| 27 | + |
| 28 | +<section class="language-javascript"> |
| 29 | + |
| 30 | +# How to use |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +You can download all the available grammars by clicking on the following link: <button class="download-grammars" type="button">download all grammars</button>.<br /> |
| 35 | +Alternatively, you can also clone the GitHub repo and take the `components` folder from there. Read our [usage section](https://prismjs.com/index.html#basic-usage-cdn) to use a CDN. |
| 36 | + |
| 37 | +You can then download Prism core and any plugins from the [Download](https://prismjs.com/download.html) 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). |
| 38 | + |
| 39 | +A couple of additional options are available through the configuration object `Prism.plugins.autoloader`. |
| 40 | + |
| 41 | +## Specifying the grammars path |
| 42 | + |
| 43 | +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: |
| 44 | + |
| 45 | +``` |
| 46 | +Prism.plugins.autoloader.languages_path = 'path/to/grammars/'; |
| 47 | +``` |
| 48 | + |
| 49 | +_Note:_ Autoloader is pretty good at guessing this path. You most likely won't have to change this path. |
| 50 | + |
| 51 | +## Using development versions |
| 52 | + |
| 53 | +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: |
| 54 | + |
| 55 | +``` |
| 56 | +Prism.plugins.autoloader.use_minified = false; |
| 57 | +``` |
| 58 | + |
| 59 | +## Specifying additional dependencies |
| 60 | + |
| 61 | +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. |
| 62 | + |
| 63 | +```markup |
| 64 | +<pre><code class="language-pug" data-dependencies="less"> |
| 65 | +:less |
| 66 | + foo { |
| 67 | + color: @red; |
| 68 | + } |
| 69 | +</code><pre> |
| 70 | +``` |
| 71 | + |
| 72 | +## Force to reload a grammar |
| 73 | + |
| 74 | +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. |
| 75 | + |
| 76 | +```html |
| 77 | +<pre class="language-markup" data-dependencies="markup,css!"><code> |
| 78 | +``` |
| 79 | + |
| 80 | +</section> |
| 81 | + |
| 82 | +<section> |
| 83 | + |
| 84 | +# Examples |
| 85 | + |
| 86 | +Note that no languages are loaded on this page by default. |
| 87 | + |
| 88 | +Basic usage with some Perl code: |
| 89 | + |
| 90 | +```perl |
| 91 | +my ($class, $filename) = @_; |
| 92 | +``` |
| 93 | + |
| 94 | +Alias support with TypeScript's `ts`: |
| 95 | + |
| 96 | +```ts |
| 97 | +const a: number = 0; |
| 98 | +``` |
| 99 | + |
| 100 | +The Less filter used in Pug: |
| 101 | + |
| 102 | +```pug |
| 103 | +:less |
| 104 | + foo { |
| 105 | + color: @red; |
| 106 | + } |
| 107 | +``` |
| 108 | + |
| 109 | +# Markdown |
| 110 | + |
| 111 | +Markdown will use the Autoloader to automatically load missing languages. |
| 112 | + |
| 113 | +````markdown |
| 114 | +The C# code will be highlighted __after__ the rest of this document. |
| 115 | + |
| 116 | +```csharp |
| 117 | +public class Foo : IBar<int> { |
| 118 | + public string Baz { get; set; } = "foo"; |
| 119 | +} |
| 120 | +``` |
| 121 | + |
| 122 | +The CSS code will be highlighted with this document because CSS has already been loaded. |
| 123 | + |
| 124 | +```css |
| 125 | +a:hover { |
| 126 | + color: green !important; |
| 127 | +} |
| 128 | +``` |
| 129 | +```` |
| 130 | + |
| 131 | +</section> |
| 132 | + |
| 133 | +<script> |
| 134 | + async function getZip (files, elt) { |
| 135 | + let process = async () => { |
| 136 | + elt.setAttribute('data-progress', Math.round((i / l) * 100)); |
| 137 | + if (i < l) { |
| 138 | + await addFile(zip, files[i][0], files[i][1]); |
| 139 | + i++; |
| 140 | + await process(); |
| 141 | + } |
| 142 | + }; |
| 143 | + |
| 144 | + let zip = new JSZip(); |
| 145 | + let l = files.length; |
| 146 | + let i = 0; |
| 147 | + |
| 148 | + await process(); |
| 149 | + |
| 150 | + return zip; |
| 151 | + } |
| 152 | + |
| 153 | + async function addFile (zip, filename, filepath) { |
| 154 | + let contents = await getFileContents(filepath); |
| 155 | + zip.file(filename, contents); |
| 156 | + } |
| 157 | + |
| 158 | + async function getFileContents (filepath) { |
| 159 | + let response = await fetch(filepath); |
| 160 | + if (!response.ok) { |
| 161 | + throw new Error(`HTTP error! status: ${response.status}`); |
| 162 | + } |
| 163 | + return response.text(); |
| 164 | + } |
| 165 | + |
| 166 | + addEventListener("DOMContentLoaded", async () => { |
| 167 | + let components = await (await fetch('/components.json')).json(); |
| 168 | + |
| 169 | + document.querySelector('.download-grammars').addEventListener('click', async ({ target }) => { |
| 170 | + let btn = target; |
| 171 | + if (btn.classList.contains('loading')) { |
| 172 | + return; |
| 173 | + } |
| 174 | + btn.classList.add('loading'); |
| 175 | + btn.setAttribute('data-progress', 0); |
| 176 | + |
| 177 | + let files = []; |
| 178 | + for (let id in components.languages) { |
| 179 | + if (id === 'meta') { |
| 180 | + continue; |
| 181 | + } |
| 182 | + let basepath = components.languages.meta.path.replace(/\{id}/g, id); |
| 183 | + let basename = basepath.substring(basepath.lastIndexOf('/') + 1); |
| 184 | + files.push([basename + '.js', basepath + '.js']); |
| 185 | + files.push([basename + '.min.js', basepath + '.min.js']); |
| 186 | + } |
| 187 | + |
| 188 | + let zip = await getZip(files, btn); |
| 189 | + btn.classList.remove('loading'); |
| 190 | + |
| 191 | + let blob = await zip.generateAsync({ type: 'blob' }); |
| 192 | + saveAs(blob, 'prism-components.zip'); |
| 193 | + }); |
| 194 | + }); |
| 195 | +</script> |
0 commit comments