fix: port over isHydrated work to legacy Code component (#1206)

[![PR App][icn]][demo] | CX-2419
:-------------------:|:----------:

## 🧰 Changes

Port over [Kevin's work in this
PR](#1198) to the legacy
markdown `Code` component
skipped the Mermaid parts as we don't use that in the legacy markdown
for `CodeTabs`

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

Author: julshotal

components/Code/index.jsx

@@ -2,6 +2,8 @@ const copy = require('copy-to-clipboard');
 const PropTypes = require('prop-types');
 const React = require('react');
 
+const useHydrated = require('../../hooks/useHydrated');
+
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
@@ -39,9 +41,10 @@ CopyCode.propTypes = {
 
 function Code(props) {
   const { children, className, copyButtons, lang, meta, theme } = props;
+  const isHydrated = useHydrated();
 
   const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
-  const language = canonicalLanguage(lang) || langClass;
+  const language = isHydrated ? canonicalLanguage(lang) || langClass : langClass;
 
   const codeRef = React.createRef();
 
@@ -52,7 +55,9 @@ function Code(props) {
   };
 
   const codeContent =
-    syntaxHighlighter && children ? syntaxHighlighter(children[0], language, codeOpts) : children?.[0] || '';
+    syntaxHighlighter && children && isHydrated
+      ? syntaxHighlighter(children[0], language, codeOpts)
+      : children?.[0] || '';
 
   return (
     <React.Fragment>

hooks/useHydrated/index.jsx

@@ -0,0 +1,14 @@
+const React = require('react');
+
+/**
+ * A hook that returns whether or not the component has been hydrated.
+ * Useful for components that should only render in the browser, and not during SSR.
+ * Waiting to render until after hydration avoids React hydration mismatches.
+ */
+function useHydrated() {
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  React.useEffect(() => setIsHydrated(true), []);
+  return isHydrated;
+}
+
+module.exports = useHydrated;