feat(Docs): Syntax highlight code blocks in MDX

schema/organization/Brand.schema.md

@@ -5,9 +5,9 @@
 `Brand` does not seem to have an element analagous in the JATS schema. However, it may be possible to use the [`<custom-meta>`](https://jats.nlm.nih.gov/archiving/tag-library/1.1/element/custom-meta.html) element.
 Example:
 
-```
+```xml
 <custom-meta>
-<meta-name>software-brand</meta-name>
-<meta-value>Stats'n'Maths</meta-value>
+  <meta-name>software-brand</meta-name>
+  <meta-value>Stats'n'Maths</meta-value>
 </custom-meta>
 ```

schema/organization/Person.md

@@ -92,14 +92,14 @@ In HTML5 metadata about the author can be included in two ways.
 1. If there is a link to the detailed information about the author (eg. their homepage), `rel="author"` with `link` or `a` [should be used](https://html.spec.whatwg.org/multipage/links.html#link-type-author).
    Example:
 
-```
+```html
 <a href="http://johnsplace.com" rel="author">John</a>
 ```
 
 2. If there is no link to the information about the author, `class="author"` attribute should be used with `area`, `span` and so on.
    Example:
 
-```
+```html
 <span class="author">John</span>
 ```
 

src/components/CodeTabs.tsx

@@ -1,8 +1,7 @@
 import { Tab } from 'rbx'
 import * as React from 'react'
 import { useState } from 'react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { Pre } from './Pre'
 
 interface Props {
   data: {
@@ -57,13 +56,7 @@ export const CodeTabs = ({ data }: Props) => {
         ))}
       </Tab.Group>
 
-      <SyntaxHighlighter
-        className="is-marginless"
-        language="json"
-        style={atomDark}
-      >
-        {JSON.stringify(fetchedData[schemaIndex], null, 2)}
-      </SyntaxHighlighter>
+      <Pre>{JSON.stringify(fetchedData[schemaIndex], null, 2)}</Pre>
     </div>
   )
 }

src/components/Pre.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+/**
+ * Markdown code blocks tagged with a language (such as ``` javascript) apply a class of
+ * `language-X`, where X is the tagged language. The React-Syntax-Highlighter plugin however
+ * requires the `language` prop to not have the `language-` prefix. This function matches and extracts
+ * the language name, or the last class name.
+ * @param {string} s Raw string of either the language name or the CSS class name containing the language.
+ */
+const languageRegEx = new RegExp('((?:language-?)\\w+|\\w+$)')
+const stripLangPrefix = (s: string) =>
+  languageRegEx.exec(s)[1].replace('language-', '')
+
+interface StyledPre extends React.HTMLAttributes<HTMLPreElement> {
+  // Children can be either strings found in JSON file contents, or code blocks found in MDX files represented as React nodes.
+  children?:
+    | string
+    | {
+        props: {
+          children: React.ReactNode
+          className: string
+        }
+      }
+}
+
+export const Pre = (props: StyledPre) => {
+  const { children, ...rest } = props
+
+  if (!children) return null
+
+  const content =
+    typeof children === 'string'
+      ? { children, language: 'json' }
+      : {
+          children: children.props.children,
+          language: stripLangPrefix(children.props.className)
+        }
+
+  return (
+    <SyntaxHighlighter
+      className="is-marginless"
+      language={content.language}
+      style={atomDark}
+      {...rest}
+    >
+      {content.children}
+    </SyntaxHighlighter>
+  )
+}

src/templates/page.tsx

@@ -1,9 +1,11 @@
+import { MDXProvider } from '@mdx-js/react'
 import { graphql } from 'gatsby'
 import { MDXRenderer } from 'gatsby-mdx'
 import { Block, Column, Content, Tag, Title } from 'rbx'
 import * as React from 'react'
 import { CodeTabs } from '../components/CodeTabs'
 import { LayoutProps, withLayout } from '../components/Layout'
+import { Pre } from '../components/Pre'
 import { SchemaTable } from '../components/SchemaTable'
 
 interface DocumentationPageProps extends LayoutProps {
@@ -14,6 +16,10 @@ interface DocumentationPageProps extends LayoutProps {
   }
 }
 
+const tagRenderers = {
+  pre: Pre
+}
+
 const Documentation = (props: DocumentationPageProps) => {
   const file = props.data.schema.edges[0].node
   if (!file.relativePath) {
@@ -51,7 +57,9 @@ const Documentation = (props: DocumentationPageProps) => {
             <>
               <Block>
                 <Content>
-                  <MDXRenderer>{props.data.notes.code.body}</MDXRenderer>
+                  <MDXProvider components={tagRenderers}>
+                    <MDXRenderer>{props.data.notes.code.body}</MDXRenderer>
+                  </MDXProvider>
                 </Content>
               </Block>