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" 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.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 e0da6830..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. @@ -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.
    - {% for id, plugin in plugins -%} + {% for plugin in collections.plugin -%} + {%- set meta = plugin.data -%}
  • - {{ plugin.title }} -
    {{ plugin.description | safe }}
    + {{ meta.title | md }} +
    {{ meta.description | md }}
    • {% endfor -%}
diff --git a/_build/copy-plugins.mjs b/_build/copy-plugins.mjs new file mode 100644 index 00000000..2e45be16 --- /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; + // 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 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/_redirects b/_redirects new file mode 100644 index 00000000..2445e1c9 --- /dev/null +++ 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 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; + } + } +} 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/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", 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 ---