fix: create a remark plugin that fixes fenced code block parsing issues

Author: jerelmiller

gatsby-config.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-const indentedCodeBlock = require('./codemods/indentedCodeBlock');
 
 const siteUrl = 'https://docs.newrelic.com';
 
@@ -181,7 +180,7 @@ module.exports = {
         // https://github.com/mdx-js/mdx/issues/1283
         //
         // If this is addressed in MDX v2, we can safely remove this.
-        remarkPlugins: [indentedCodeBlock],
+        remarkPlugins: [],
         gatsbyRemarkPlugins: [
           {
             resolve: 'gatsby-remark-images',
@@ -217,6 +216,11 @@ module.exports = {
               maxWidth: 1200,
             },
           },
+          {
+            resolve: require.resolve(
+              './plugins/gatsby-remark-mdx-v2-fenced-code-blocks'
+            ),
+          },
         ],
       },
     },

plugins/gatsby-remark-mdx-v2-fenced-code-blocks/index.js

@@ -0,0 +1,25 @@
+const { createCompiler } = require('@mdx-js/mdx');
+const visit = require('unist-util-visit');
+
+const INVALID_CODE_BLOCK = /`{3,}\n/;
+
+const compiler = createCompiler();
+
+module.exports = ({ markdownAST }) => {
+  visit(
+    markdownAST,
+    (node) => node.type === 'code' && INVALID_CODE_BLOCK.test(node.value),
+    (node, idx, parent) => {
+      const idxOfCode = node.value.indexOf('```');
+      const text = node.value.slice(0, idxOfCode);
+      const parsed = compiler.parse(
+        node.value.slice(idxOfCode).replace(/^`+/, '')
+      );
+
+      node.value = text.trim();
+      parent.children.splice(idx + 1, 0, ...parsed.children);
+    }
+  );
+
+  return markdownAST;
+};

plugins/gatsby-remark-mdx-v2-fenced-code-blocks/package.json

@@ -0,0 +1 @@
+{}