From 38e3d2d657113bf98b0457030910a1b973e8b855 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:30:18 +0200 Subject: [PATCH 01/11] Add copy script --- _build/copy-plugins.mjs | 47 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 _build/copy-plugins.mjs diff --git a/_build/copy-plugins.mjs b/_build/copy-plugins.mjs new file mode 100644 index 00000000..09f21468 --- /dev/null +++ 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; + // Don't copy the plugin source files + if (!name.endsWith(plugin.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")); From 22c15ac0cdec8329d959c54e6779ef8f77f0c352 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:34:50 +0200 Subject: [PATCH 02/11] Adjust build process --- .gitignore | 1 + README.md | 7 ++++--- _build/eleventy.js | 5 ++++- _data/eleventyComputed.js | 37 +++++++++++++++++++++++++++++-------- _data/pluginsWithMeta.js | 16 ---------------- package-lock.json | 9 +++++++-- package.json | 1 + 7 files changed, 46 insertions(+), 30 deletions(-) delete mode 100644 _data/pluginsWithMeta.js diff --git a/.gitignore b/.gitignore index 4f5c30c3..5b2ce611 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ Thumbs.db # Generated files *.html api +plugins # Cache .cache diff --git a/README.md b/README.md index e0da6830..3f237d4c 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/_build/eleventy.js b/_build/eleventy.js index 92de44ad..83e7a33f 100644 --- 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 index 299aa6e3..d9c102f8 100644 --- 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 deleted file mode 100644 index dce09ee5..00000000 --- a/_data/pluginsWithMeta.js +++ /dev/null @@ -1,16 +0,0 @@ -import Fetch from "@11ty/eleventy-fetch"; - -export default async () => { - try { - let plugins = await Fetch("https://plugins.prismjs.com/plugins.json", { - duration: "1d", - type: "json", - }); - - return plugins; - } - catch (e) { - console.error(e); - return {}; - } -}; diff --git a/package-lock.json b/package-lock.json index 70883e5b..f0ce2d66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "prismjs-website", "version": "0.0.1", + "hasInstallScript": true, "license": "MIT", "devDependencies": { "@11ty/eleventy": "^3.0.0", @@ -2645,11 +2646,15 @@ }, "node_modules/prismjs": { "version": "1.29.0", - "resolved": "git+ssh://git@github.com/PrismJS/prism.git#f5343b82f95bb4f5e02b83581d64180216458a88", + "resolved": "git+ssh://git@github.com/PrismJS/prism.git#44429cac5aa9e2ae56d8adab20195edb1496fd30", "dev": true, "license": "MIT", "engines": { - "node": ">=14" + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/prismjs" } }, "node_modules/promise": { diff --git a/package.json b/package.json index 8621ebb6..99192fe8 100644 --- 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", From c0e0b290cf6163d9d0d3c6aac17ea35a16a99b5d Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:35:09 +0200 Subject: [PATCH 03/11] Add _redirects --- _redirects | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 _redirects diff --git a/_redirects b/_redirects new file mode 100644 index 00000000..1df0cecb --- /dev/null +++ b/_redirects @@ -0,0 +1,9 @@ +# Do not redirect +/plugins/:plugin/index.html /plugins/:plugin/index.html 200 +/plugins/:plugin/demo.js /plugins/:plugin/demo.js 200 + +# Components: languages, themes, plugins, etc. +/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 From 092a2bec01be7f6ea1050ce30e8ab57c7e7a5db6 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:35:29 +0200 Subject: [PATCH 04/11] Tweak styles --- assets/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/assets/style.css b/assets/style.css index a3e5e335..3998db82 100644 --- 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; + } + } +} From 69374f8ad61230a80dc5aef5dae0e56f8e3cf481 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:35:55 +0200 Subject: [PATCH 05/11] Remove GitHub action --- .github/workflows/plugins-website-rebuild.yml | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 .github/workflows/plugins-website-rebuild.yml diff --git a/.github/workflows/plugins-website-rebuild.yml b/.github/workflows/plugins-website-rebuild.yml deleted file mode 100644 index e142e6e0..00000000 --- a/.github/workflows/plugins-website-rebuild.yml +++ /dev/null @@ -1,19 +0,0 @@ -name: Rebuild Plugins Website - -on: - push: - branches: - - main - paths: - # 11ty-related folders - - "_build/**" - - "_layouts/**" - - "_includes/**" - - "_data/**" - -jobs: - trigger-rebuild: - runs-on: ubuntu-latest - steps: - - name: Trigger Netlify Build Hook - run: curl -X POST -d "{}" "${{ secrets.PLUGINS_WEBSITE_BUILD_HOOK_URL }}?trigger_title=The+main+repo+has+been+updated&clear_cache=true" From a2caf017dba7455973276f1dfa8f3e537c8fa79f Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Wed, 7 May 2025 23:40:26 +0200 Subject: [PATCH 06/11] Add one more rule to _redirects --- _redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/_redirects b/_redirects index 1df0cecb..1d27dcf2 100644 --- a/_redirects +++ b/_redirects @@ -1,5 +1,6 @@ # 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 # Components: languages, themes, plugins, etc. From 8b81b3e18555d66735a904744b0df0e1206aa237 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Thu, 8 May 2025 16:28:26 +0200 Subject: [PATCH 07/11] Make permalink more universal --- _build/copy-plugins.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_build/copy-plugins.mjs b/_build/copy-plugins.mjs index 09f21468..ae130f08 100644 --- a/_build/copy-plugins.mjs +++ b/_build/copy-plugins.mjs @@ -40,7 +40,7 @@ await copy(); // Create plugins.json in the plugins folder with global data let json = { - permalink: "{{ page.filePathStem.replace('README', '') }}/index.html", + permalink: "{{ page.filePathStem.replace('README', '/index') }}.html", tags: ["plugin"], }; From 891be35fca90b6f7c99de95197ce304c77f6f2cb Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Thu, 8 May 2025 16:42:18 +0200 Subject: [PATCH 08/11] Copy only the `README.md` and `demo.*` files --- _build/copy-plugins.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_build/copy-plugins.mjs b/_build/copy-plugins.mjs index ae130f08..2e45be16 100644 --- a/_build/copy-plugins.mjs +++ b/_build/copy-plugins.mjs @@ -28,8 +28,8 @@ async function copy () { } let name = path.parse(file.name).name; - // Don't copy the plugin source files - if (!name.endsWith(plugin.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)); } } From 5112c0881ee01aead89d7933beaf1a93bffa1e26 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Thu, 8 May 2025 16:58:40 +0200 Subject: [PATCH 09/11] Fix plugin URLs --- README.json | 5 +---- README.md | 12 ++++++------ examples.md | 2 +- extending.md | 8 ++++---- faq.md | 6 +++--- known-failures.md | 2 +- test.md | 2 +- tokens.md | 12 ++++++------ 8 files changed, 23 insertions(+), 26 deletions(-) diff --git a/README.json b/README.json index ef208d9d..d0efc02c 100644 --- 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 index 3f237d4c..162e922c 100644 --- 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/)). @@ -107,7 +107,7 @@ Inline code snippets are done like this: p { color: red } ``` -**Note**: You have to escape all `<` and `&` characters inside `` elements (code blocks and inline snippets) with `<` and `&` 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 `` elements (code blocks and inline snippets) with `<` and `&` 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 @@ -115,7 +115,7 @@ To make things easier however, Prism assumes that the language class is inherite If you want to opt-out of highlighting a `` 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. diff --git a/examples.md b/examples.md index 51828a94..838ef2c9 100644 --- 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 ---
diff --git a/extending.md b/extending.md index 28f01e78..9feb0f02 100644 --- 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 ---
@@ -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 index 74c5bea9..a5983f77 100644 --- 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 ---
@@ -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/).
@@ -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.
diff --git a/known-failures.md b/known-failures.md index 5c97b6e4..85297a06 100644 --- 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/test.md b/test.md index 267915e2..a43b30b4 100644 --- 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 - --- diff --git a/tokens.md b/tokens.md index 24ce255a..f71d8bf1 100644 --- 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 ---
From cd7283d0826a84ead2543339f88e8582abaa97db Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Thu, 8 May 2025 16:59:03 +0200 Subject: [PATCH 10/11] Add a rule for components --- _redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/_redirects b/_redirects index 1d27dcf2..37d6e17a 100644 --- a/_redirects +++ b/_redirects @@ -4,6 +4,7 @@ /plugins/:plugin/demo.js /plugins/:plugin/demo.js 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 From 0ffbf218982d7f7d841c9bcd14519223b0bcf566 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Thu, 8 May 2025 17:00:29 +0200 Subject: [PATCH 11/11] And another rule (just in case) --- _redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/_redirects b/_redirects index 37d6e17a..2445e1c9 100644 --- a/_redirects +++ b/_redirects @@ -2,6 +2,7 @@ /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