[docs-infra] Support backticks in the codeblocks

docs/pages/experiments/docs/installation.md

@@ -8,10 +8,12 @@
 
 ```bash npm
 npm install @mui/material @emotion/react @emotion/styled
+# `@emotion/react` and `@emotion/styled` are peer dependencies
 ```
 
 ```bash yarn
 yarn add @mui/material @emotion/react @emotion/styled
+# `@emotion/react` and `@emotion/styled` are peer dependencies
 ```
 
 </codeblock>

packages/markdown/parseMarkdown.js

@@ -200,6 +200,26 @@ function getDescription(markdown) {
   return matches[1].trim().replace(/`/g, '');
 }
 
+function getCodeblock(content) {
+  if (content.startsWith('<codeblock')) {
+    const storageKey = content.match(/^<codeblock [^>]*storageKey=["|'](\S*)["|'].*>/m)?.[1];
+    const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map(
+      ([, language, tab, code]) => ({ language, tab, code }),
+    );
+
+    const blocksData = blocks.filter(
+      (block) => block.tab !== undefined && !emptyRegExp.test(block.code),
+    );
+
+    return {
+      type: 'codeblock',
+      data: blocksData,
+      storageKey,
+    };
+  }
+  return undefined;
+}
+
 /**
  * @param {string} markdown
  */
@@ -548,21 +568,11 @@ ${headers.hooks
             return null;
           }
         }
-        if (content.startsWith('<codeblock')) {
-          const storageKey = content.match(/^<codeblock [^>]*storageKey=["|'](\S*)["|'].*>/m)?.[1];
-          const blocks = [...content.matchAll(/^```(\S*) (\S*)\n([^`]*)\n```/gmsu)].map(
-            ([, language, tab, code]) => ({ language, tab, code }),
-          );
-
-          const blocksData = blocks.filter(
-            (block) => block.tab !== undefined && !emptyRegExp.test(block.code),
-          );
-
-          return {
-            type: 'codeblock',
-            data: blocksData,
-            storageKey,
-          };
+
+        const codeblock = getCodeblock(content);
+
+        if (codeblock) {
+          return codeblock;
         }
 
         return render(content);
@@ -617,6 +627,7 @@ module.exports = {
   createRender,
   getContents,
   getDescription,
+  getCodeblock,
   getHeaders,
   getTitle,
   prepareMarkdown,

packages/markdown/parseMarkdown.test.js

@@ -5,6 +5,7 @@ import {
   getTitle,
   getHeaders,
   prepareMarkdown,
+  getCodeblock,
 } from './parseMarkdown';
 
 describe('parseMarkdown', () => {
@@ -158,6 +159,45 @@ authors:
         ]);
       });
     });
+
+    describe('Split markdown into an array, separating codeblocks', () => {
+      it('uses a `<codeblock>` tag to split', () => {
+        expect(
+          getContents(
+            [
+              '## Tabs',
+              '',
+              '<codeblock storageKey="package-manager">',
+              '',
+              '```bash npm',
+              'npm install @mui/material @emotion/react @emotion/styled',
+              '```',
+              '',
+              '```bash yarn',
+              'yarn add @mui/material @emotion/react @emotion/styled',
+              '```',
+              '',
+              '</codeblock>',
+            ].join('\n'),
+          ),
+        ).to.deep.equal([
+          '## Tabs\n\n',
+          [
+            '<codeblock storageKey="package-manager">',
+            '',
+            '```bash npm',
+            'npm install @mui/material @emotion/react @emotion/styled',
+            '```',
+            '',
+            '```bash yarn',
+            'yarn add @mui/material @emotion/react @emotion/styled',
+            '```',
+            '',
+            '</codeblock>',
+          ].join('\n'),
+        ]);
+      });
+    });
   });
 
   describe('prepareMarkdown', () => {
@@ -523,6 +563,55 @@ https://ahrefs.com/blog/meta-description/#4-be-concise
     });
   });
 
+  describe('getCodeblock', () => {
+    it('should return undefined if no codeblock found', () => {
+      const codeblock = getCodeblock('## Tabs');
+      expect(codeblock).to.equal(undefined);
+    });
+
+    it('should return the codeblock', () => {
+      const codeblock = getCodeblock(
+        [
+          '<codeblock storageKey="package-manager">',
+          '',
+          '```bash npm',
+          'npm install @mui/material @emotion/react @emotion/styled',
+          '# `@emotion/react` and `@emotion/styled` are peer dependencies',
+          '```',
+          '',
+          '```sh yarn',
+          'yarn add @mui/material @emotion/react @emotion/styled',
+          '# `@emotion/react` and `@emotion/styled` are peer dependencies',
+          '```',
+          '',
+          '</codeblock>',
+        ].join('\n'),
+      );
+      expect(codeblock).to.deep.equal({
+        type: 'codeblock',
+        storageKey: 'package-manager',
+        data: [
+          {
+            language: 'bash',
+            tab: 'npm',
+            code: [
+              'npm install @mui/material @emotion/react @emotion/styled',
+              '# `@emotion/react` and `@emotion/styled` are peer dependencies',
+            ].join('\n'),
+          },
+          {
+            language: 'sh',
+            tab: 'yarn',
+            code: [
+              'yarn add @mui/material @emotion/react @emotion/styled',
+              '# `@emotion/react` and `@emotion/styled` are peer dependencies',
+            ].join('\n'),
+          },
+        ],
+      });
+    });
+  });
+
   it('should not accept sh', () => {
     const markdown = `
 # Foo