PrismJS · DmitrySharabin · May 9, 2025 · May 7, 2025 · May 7, 2025 · May 7, 2025
diff --git a/.github/workflows/plugins-website-rebuild.yml b/.github/workflows/plugins-website-rebuild.yml
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ Thumbs.db
 # Generated files
 *.html
 api
+plugins
 
 # Cache
 .cache

diff --git a/README.json b/README.json
@@ -1,7 +1,4 @@
 {
 	"layout": "home.njk",
-	"resources": [
-		"https://plugins.prismjs.com/keep-markup/prism-keep-markup.js",
-		"https://dev.prismjs.com/components/prism-bash.js"
-	]
+	"resources": ["plugins/keep-markup/prism-keep-markup.js", "https://dev.prismjs.com/components/prism-bash.js"]
 }
diff --git a/README.md b/README.md
@@ -56,9 +56,9 @@ If you’re still not sold, you can [view more examples](examples.html) or [try
 - Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML).
 - Highlights inline code as well, not just code blocks.
 - It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
-- Highlight specific lines and/or line ranges (requires [plugin](https://plugins.prismjs.com/line-highlight/)).
-- Show invisible characters like tabs, line breaks etc (requires [plugin](https://plugins.prismjs.com/show-invisibles/)).
-- Autolink URLs and emails, use Markdown links in comments (requires [plugin](https://plugins.prismjs.com/autolinker/)).
+- Highlight specific lines and/or line ranges (requires [plugin](plugins/line-highlight/)).
+- Show invisible characters like tabs, line breaks etc (requires [plugin](plugins/show-invisibles/)).
+- Autolink URLs and emails, use Markdown links in comments (requires [plugin](plugins/autolinker/)).
 
 </section>
 
@@ -107,15 +107,15 @@ Inline code snippets are done like this:
 <code class="language-css">p { color: red }</code>
 ```
 
-**Note**: You have to escape all `<` and `&` characters inside `<code>` elements (code blocks and inline snippets) with `&lt;` and `&amp;` respectively, or else the browser might interpret them as an HTML tag or [entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity). If you have large portions of HTML code, you can use the [Unescaped Markup plugin](https://plugins.prismjs.com/unescaped-markup/) to work around this.
+**Note**: You have to escape all `<` and `&` characters inside `<code>` elements (code blocks and inline snippets) with `&lt;` and `&amp;` respectively, or else the browser might interpret them as an HTML tag or [entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity). If you have large portions of HTML code, you can use the [Unescaped Markup plugin](plugins/unescaped-markup/) to work around this.
 
 ## Language inheritance
 
 To make things easier however, Prism assumes that the language class is inherited. Therefore, if multiple `<code>` elements have the same language, you can add the `language-xxxx` class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a `language-xxxx` class on the `<body>` or `<html>` element.
 
 If you want to opt-out of highlighting a `<code>` element that inherits its language, you can add the `language-none` class to it. The `none` language can also be inherited to disable highlighting for the element with the class and all of its descendants.
 
-If you want to opt-out of highlighting but still use plugins like [Show Invisibles](https://plugins.prismjs.com/show-invisibles/), use `language-plain` class instead.
+If you want to opt-out of highlighting but still use plugins like [Show Invisibles](plugins/show-invisibles/), use `language-plain` class instead.
 
 ## Manual highlighting
 
@@ -137,7 +137,7 @@ window.Prism.manual = true;
 
 ## Usage with CDNs { #basic-usage-cdn }
 
-In combination with CDNs, we recommend using the [Autoloader plugin](https://plugins.prismjs.com/autoloader) which automatically loads languages when necessary.
+In combination with CDNs, we recommend using the [Autoloader plugin](plugins/autoloader) which automatically loads languages when necessary.
 
 The setup of the Autoloader, will look like the following. You can also add your own themes of course.
 
@@ -240,10 +240,11 @@ Couldn’t find the language you were looking for? [Request it](https://github.c
 Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.
 
 <ul class="plugin-list">
-	{% for id, plugin in plugins -%}
+	{% for plugin in collections.plugin -%}
+	{%- set meta = plugin.data -%}
 	<li>
-		<a href="https://plugins.prismjs.com/{{ id }}">{{ plugin.title }}</a>
-		<div>{{ plugin.description | safe }}</div>
+		<a href="plugins/{{ meta.id }}">{{ meta.title | md }}</a>
+		<div>{{ meta.description | md }}</div>
 	</li>
 	{% endfor -%}
 </ul>

diff --git a/_build/copy-plugins.mjs b/_build/copy-plugins.mjs
@@ -0,0 +1,47 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const sourcePath = path.resolve(__dirname, "../node_modules/prismjs/src/plugins");
+const destPath = path.resolve(__dirname, "../plugins");
+
+async function copy () {
+	// We need { recursive: true } so the script doesn't fail if the folder already exists
+	await fs.mkdir(destPath, { recursive: true });
+
+	let plugins = await fs.readdir(sourcePath, { withFileTypes: true });
+	for (let plugin of plugins) {
+		if (!plugin.isDirectory()) {
+			continue;
+		}
+
+		let source = path.join(sourcePath, plugin.name);
+		let dest = path.join(destPath, plugin.name);
+		await fs.mkdir(dest, { recursive: true });
+
+		let files = await fs.readdir(source, { withFileTypes: true });
+		for (let file of files) {
+			if (!file.isFile()) {
+				continue;
+			}
+
+			let name = path.parse(file.name).name;
+			// Copy only the README.md and demo.* files
+			if (["README", "demo"].includes(name)) {
+				await fs.copyFile(path.join(source, file.name), path.join(dest, file.name));
+			}
+		}
+	}
+}
+
+await copy();
+
+// Create plugins.json in the plugins folder with global data
+let json = {
+	permalink: "{{ page.filePathStem.replace('README', '/index') }}.html",
+	tags: ["plugin"],
+};
+
+await fs.writeFile(path.join(destPath, "plugins.json"), JSON.stringify(json, null, "\t"));
diff --git a/_build/eleventy.js b/_build/eleventy.js
@@ -4,7 +4,7 @@ import markdownItDeflist from "markdown-it-deflist";
 import pluginTOC from "eleventy-plugin-toc";
 import * as filters from "./filters.js";
 
-import components from "prismjs/src/components.json" with { type: "json" };
+import components from "../node_modules/prismjs/src/components.json" with { type: "json" };
 
 /** @param {import("@11ty/eleventy").UserConfig} config */
 export default config => {
@@ -72,6 +72,9 @@ export default config => {
 		ul: true,
 	});
 
+	// Don't ignore the folders that are gitignored (plugins, examples, themes, etc.)
+	config.setUseGitIgnore(false);
+
 	return {
 		markdownTemplateEngine: "njk",
 		templateFormats: ["md", "njk"],

diff --git a/_data/eleventyComputed.js b/_data/eleventyComputed.js
@@ -1,13 +1,6 @@
 export default {
 	components (data) {
-		let components = { ...data.components };
-		components.plugins = { ...(data.pluginsWithMeta ?? {}) };
-		return components;
-	},
-	plugins (data) {
-		let plugins = { ...data.pluginsWithMeta };
-		delete plugins.meta;
-		return plugins;
+		return { ...data.components };
 	},
 	themes (data) {
 		let themes = { ...data.components.themes };
@@ -29,6 +22,14 @@ export default {
 
 		return languages;
 	},
+	// Plugin id
+	id (data) {
+		let parts = data.page.inputPath.slice(2).split("/");
+		if (parts[0] === "plugins") {
+			// Folder name ↔ plugin id
+			return parts[1];
+		}
+	},
 	title (data) {
 		if (data.title) {
 			return data.title;
@@ -46,6 +47,26 @@ export default {
 
 		return title[0].toUpperCase() + title.slice(1);
 	},
+	resources (data) {
+		let { id, resources = [] } = data;
+		let ret = [];
+
+		resources = Array.isArray(resources) ? resources : [resources];
+		ret.push(...resources);
+
+		if (!id) {
+			return ret;
+		}
+
+		// We are working with plugin resources
+		ret.push(`./prism-${id}.js { type="module" }`);
+
+		if (!data.noCSS) {
+			ret.push(`./prism-${id}.css`);
+		}
+
+		return ret;
+	},
 	files_sizes (data) {
 		let ret = {};
 		for (let file of data.tree) {

diff --git a/_data/pluginsWithMeta.js b/_data/pluginsWithMeta.js
diff --git a/_redirects b/_redirects
@@ -0,0 +1,12 @@
+# Do not redirect
+/plugins/:plugin/index.html    /plugins/:plugin/index.html                    200
+/plugins/:plugin/demo.html     /plugins/:plugin/demo.html                     200
+/plugins/:plugin/demo.js       /plugins/:plugin/demo.js                       200
+/plugins/:plugin/demo.css       /plugins/:plugin/demo.css                     200
+
+# Components: languages, themes, plugins, etc.
+/components/*                  https://dev.prismjs.com/components/:splat      200
+/plugins/:plugin/:file         https://dev.prismjs.com/plugins/:plugin/:file  301
+
+# Make the autoloader plugin work
+/plugins/:plugin/components/*  https://dev.prismjs.com/components/:splat      301
diff --git a/assets/style.css b/assets/style.css
@@ -905,3 +905,14 @@ ul.plugin-list {
 		border-bottom-left-radius: 0;
 	}
 }
+
+/* Decorate only the first link in headings */
+section :is(h1, h2, h3)[id] {
+	a:not(:first-of-type) {
+		text-decoration: revert;
+
+		&::before {
+			display: none;
+		}
+	}
+}
diff --git a/examples.md b/examples.md
@@ -2,7 +2,7 @@
 tagline: "The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases."
 resources:
   - assets/examples.js { type="module" }
-  - https://plugins.prismjs.com/autoloader/prism-autoloader.js
+  - plugins/autoloader/prism-autoloader.js
 ---
 
 <section class="language-markup">

diff --git a/extending.md b/extending.md
@@ -3,9 +3,9 @@ title: Extending Prism
 tagline: Prism is awesome out of the box, but it’s even awesomer when it’s customized to your own needs. This section will help you write new language definitions, plugins and all-around Prism hacking.
 body_classes: language-javascript
 resources:
-  - https://plugins.prismjs.com/line-highlight/prism-line-highlight.css
-  - https://plugins.prismjs.com/line-highlight/prism-line-highlight.js
-  - https://plugins.prismjs.com/autoloader/prism-autoloader.js
+  - plugins/line-highlight/prism-line-highlight.css
+  - plugins/line-highlight/prism-line-highlight.js
+  - plugins/autoloader/prism-autoloader.js
 ---
 
 <section>
@@ -577,7 +577,7 @@ Note: You can declare a component as both `require` and `modify`.
 
 ## Resolving dependencies
 
-We consider the dependencies of components an implementation detail, so they may change from release to release. Prism will usually resolve dependencies for you automatically. So you won't have to worry about dependency loading if you [download](download.html) a bundle or use the `loadLanguages` function in NodeJS, the [AutoLoader](https://plugins.prismjs.com/autoloader/), or our Babel plugin.
+We consider the dependencies of components an implementation detail, so they may change from release to release. Prism will usually resolve dependencies for you automatically. So you won't have to worry about dependency loading if you [download](download.html) a bundle or use the `loadLanguages` function in NodeJS, the [AutoLoader](plugins/autoloader/), or our Babel plugin.
 
 If you have to resolve dependencies yourself, use the `getLoader` function exported by [`dependencies.js`](https://github.com/PrismJS/prism/blob/master/dependencies.js). Example:
 

diff --git a/faq.md b/faq.md
@@ -5,7 +5,7 @@ back_to_top: true
 body_classes: language-none
 resources:
   - assets/faq.js { type="module" }
-  - https://plugins.prismjs.com/autoloader/prism-autoloader.js
+  - plugins/autoloader/prism-autoloader.js
 ---
 
 <section>
@@ -39,7 +39,7 @@ Web Workers are good for preventing syntax highlighting of really large code blo
 
 # Why is pre-existing HTML stripped off?
 
-Because it would complicate the code a lot, although it’s not a crucial feature for most people. If it’s very important to you, you can use the [Keep Markup plugin](https://plugins.prismjs.com/keep-markup/).
+Because it would complicate the code a lot, although it’s not a crucial feature for most people. If it’s very important to you, you can use the [Keep Markup plugin](plugins/keep-markup/).
 </section>
 
 <section>
@@ -48,7 +48,7 @@ Because it would complicate the code a lot, although it’s not a crucial featur
 
 There is a number of ways around it. You can always break the block of code into multiple parts, and wrap the HTML around it (or just use a `.highlight` class). You can see an example of this in action at the “[Basic usage](index.html#basic-usage)” section of the homepage.
 
-Another way around the limitation is to use the [Line Highlight plugin](https://plugins.prismjs.com/line-highlight/), to highlight and link to specific lines and/or line ranges.
+Another way around the limitation is to use the [Line Highlight plugin](plugins/line-highlight/), to highlight and link to specific lines and/or line ranges.
 </section>
 
 <section>

diff --git a/known-failures.md b/known-failures.md
@@ -2,7 +2,7 @@
 tagline: A list of rare edge cases where Prism highlights code incorrectly.
 back_to_top: true
 body_classes: language-none
-resources: https://plugins.prismjs.com/autoloader/prism-autoloader.js
+resources: plugins/autoloader/prism-autoloader.js
 ---
 
 There are certain edge cases where Prism will fail. There are always such cases in every regex-based syntax highlighter.  

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
 	"description": "The website of prismjs.com",
 	"type": "module",
 	"scripts": {
+		"postinstall": "node _build/copy-plugins.mjs",
 		"dependencies": "npm install --prefix node_modules/prismjs",
 		"dev": "netlify dev -p 8844",
 		"serve": "npx @11ty/eleventy --config=_build/eleventy.js --serve --quiet",

diff --git a/test.md b/test.md
@@ -3,7 +3,7 @@ title: Test drive
 tagline: Take Prism for a spin!
 resources:
   - assets/test-drive.js
-  - https://plugins.prismjs.com/autoloader/prism-autoloader.js
+  - plugins/autoloader/prism-autoloader.js
   - <script> Prism.plugins.autoloader.use_minified = false; </script>
 ---
 

diff --git a/tokens.md b/tokens.md
@@ -3,12 +3,12 @@ title: Prism tokens
 tagline: Prism identifies tokens in your code, which are in turn styled by CSS to produce the syntax highlighting. This page provides an overview of the standard tokens and corresponding examples.
 body_classes: language-none
 resources:
-  - https://plugins.prismjs.com/line-highlight/prism-line-highlight.css
-  - https://plugins.prismjs.com/toolbar/prism-toolbar.css
-  - https://plugins.prismjs.com/line-highlight/prism-line-highlight.js
-  - https://plugins.prismjs.com/toolbar/prism-toolbar.js
-  - https://plugins.prismjs.com/show-language/prism-show-language.js
-  - https://plugins.prismjs.com/autoloader/prism-autoloader.js
+  - plugins/line-highlight/prism-line-highlight.css
+  - plugins/toolbar/prism-toolbar.css
+  - plugins/line-highlight/prism-line-highlight.js
+  - plugins/toolbar/prism-toolbar.js
+  - plugins/show-language/prism-show-language.js
+  - plugins/autoloader/prism-autoloader.js
 ---
 
 <section>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ Thumbs.db @@
     # Generated files
     *.html
     api
+    plugins
     # Cache
     .cache
@@ Expand Down @@