feat: create custom code block that renders a terminal for shell lang…

…uages

src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import CodeBlock from '@newrelic/gatsby-theme-newrelic/src/components/CodeBlock';
+import Terminal from '../../../components/Terminal';
+import { isShellLanguage } from '../../../utils/codeBlock';
+
+const CustomCodeBlock = ({ language, children, ...props }) => {
+  return isShellLanguage(language) ? (
+    <Terminal>{children}</Terminal>
+  ) : (
+    <CodeBlock language={language} {...props}>
+      {children}
+    </CodeBlock>
+  );
+};
+
+CustomCodeBlock.propTypes = CodeBlock.propTypes;
+
+export default CustomCodeBlock;

src/utils/codeBlock.js

@@ -6,6 +6,8 @@ export const isCodeBlock = (element) =>
 
 export const isShellCommand = (element) =>
   isCodeBlock(element) &&
-  SHELL_LANGUAGES.includes(
+  isShellLanguage(
     element.props?.children?.props?.className?.replace('language-', '')
   );
+
+export const isShellLanguage = (language) => SHELL_LANGUAGES.includes(language);