Use a more recently published prism converter for rehype

Author: Westbrook

CONTRIBUTING.md

@@ -8,33 +8,33 @@ First, create a fork of the [modernweb-dev/rocket](https://github.com/modernweb-
 
 Next, clone our repository onto your computer.
 
-```sh
+```shell
 git clone git@github.com:modernweb-dev/rocket.git
 ```
 
 Once cloning is complete, change directory to the repository.
 
-```sh
+```shell
 cd rocket
 ```
 
 Now add your fork as a remote (replacing YOUR_USERNAME with your GitHub username).
 
-```sh
+```shell
 git remote add fork git@github.com:<YOUR_USERNAME>/rocket.git
 ```
 
 Create a new local branch.
 
-```sh
+```shell
 git checkout -b my-awesome-fix
 ```
 
 ## Preparing Your Local Environment for Development
 
 Now that you have cloned the repository, ensure you have [yarn](https://classic.yarnpkg.com/lang/en/) installed, then run the following commands to set up the development environment.
 
-```sh
+```shell
 yarn install
 ```
 
@@ -69,7 +69,7 @@ This documents your intent to release, and allows you to specify a message that
 
 Run
 
-```sh
+```shell
 yarn changeset
 ```
 
@@ -92,15 +92,15 @@ Exceptions:
 Commit messages must follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/)
 Modern-web uses package name as scope. So for example if you fix a _terrible bug_ in the package `@web/test-runner`, the commit message should look like this:
 
-```sh
+```shell
 fix(test-runner): fix terrible bug
 ```
 
 ## Create a Pull Request
 
 Now it's time to push your branch that contains your committed changes to your fork.
 
-```sh
+```shell
 git push -u fork my-awesome-fix
 ```
 

docs/blog/introducing-check-html-links.md

@@ -140,7 +140,7 @@ The features so far are:
 
 It checks your final HTML output so you need to execute it after your Static Site Generator.
 
-```
+```shell
 npx check-html-links _site
 ```
 

docs/docs/eleventy-plugins/mdjs-unified.md

@@ -4,7 +4,7 @@ Use mdjs in your Eleventy site.
 
 ## Setup
 
-```
+```shell
 npm install @rocket/eleventy-plugin-mdjs
 ```
 

docs/docs/tools/check-html-links.md

@@ -22,7 +22,7 @@ Read the [Introducing Check HTMl Links - no more bad links](../../blog/introduci
 
 ## Installation
 
-```
+```shell
 npm i -D check-html-links
 ```
 

docs/guides/first-pages/manage-sidebar.md

@@ -23,7 +23,7 @@ Will be ordered as `First`, `Second`,
 
 Internally `# Foo >> Bar >> Baz ||20` gets converted to.
 
-```
+```yml
 ---
 title: Bar: Baz
 eleventyNavigation:

packages/check-html-links/README.md

@@ -4,13 +4,13 @@ A fast checker for broken links/references in HTML.
 
 ## Installation
 
-```
+```shell
 npm i -D check-html-links
 ```
 
 ## Usage
 
-```
+```bash
 npx check-html-links _site
 ```
 

packages/mdjs-core/package.json

@@ -52,7 +52,7 @@
     "github-markdown-css": "^4.0.0",
     "plugins-manager": "^0.3.0",
     "rehype-autolink-headings": "^5.0.1",
-    "rehype-prism-template": "^0.4.1",
+    "rehype-prism": "^1.0.0",
     "rehype-raw": "^5.0.0",
     "rehype-slug": "^4.0.1",
     "rehype-stringify": "^8.0.0",

packages/mdjs-core/src/mdjsProcess.js

@@ -12,14 +12,16 @@ const raw = require('rehype-raw');
 const htmlStringify = require('rehype-stringify');
 const htmlSlug = require('rehype-slug');
 const htmlHeading = require('rehype-autolink-headings');
-const rehypePrism = require('rehype-prism-template');
 // @ts-ignore
 const { executeSetupFunctions } = require('plugins-manager');
+const loadLanguages = require('prismjs/components/');
 
 const { mdjsParse } = require('./mdjsParse.js');
 const { mdjsStoryParse } = require('./mdjsStoryParse.js');
 const { mdjsSetupCode } = require('./mdjsSetupCode.js');
 
+let prismLoaded = false;
+
 /** @type {MdjsProcessPlugin[]} */
 const defaultMetaPlugins = [
   { plugin: markdown, options: {} },
@@ -30,8 +32,6 @@ const defaultMetaPlugins = [
   // @ts-ignore
   { plugin: remark2rehype, options: { allowDangerousHtml: true } },
   // @ts-ignore
-  { plugin: rehypePrism, options: {} },
-  // @ts-ignore
   { plugin: raw, options: {} },
   // @ts-ignore
   { plugin: htmlSlug, options: {} },
@@ -54,6 +54,12 @@ const defaultMetaPlugins = [
  */
 async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) {
   const parser = unified();
+  if (!prismLoaded) {
+    prismLoaded = true;
+    const rehypePrism = (await import('rehype-prism/lib/src/index.js')).default;
+    loadLanguages(['md', 'shell', 'yml']);
+    defaultMetaPlugins.splice(6, 0, { plugin: rehypePrism, options: {} });
+  }
 
   const metaPlugins = executeSetupFunctions(setupUnifiedPlugins, defaultMetaPlugins);
 

packages/mdjs-core/test-node/mdJsProcess.test.js

@@ -35,7 +35,7 @@ describe('mdjsProcess', () => {
       '',
       '',
       '',
-      '<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>',
+      '<pre class="language-js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>',
       '</code></pre>',
       '',
       '',

packages/mdjs-core/types/remark.d.ts

@@ -28,12 +28,6 @@ declare module 'rehype-autolink-headings' {
   export = unified.Plugin;
 }
 
-declare module 'rehype-prism-template' {
-  import unified from 'unified';
-
-  export = unified.Plugin;
-}
-
 declare module 'unist-util-remove' {
   import unified from 'unified';