feat: fixing some ssr issues with the markdown renderer (#705)

* feat: fixing some ssr issues with the markdown renderer

- always render the copy code button, even on the server
Fixes this issue `Warning: Expected server HTML to contain a matching <button> in <code>.`

- Added `suppressHydrationWarning={true}` to the `<code>` element
The rendered content is always going to be different due to one having
syntax highlighting and one not

* fix: add prettier-ignore to line for ie compatibility

Without this, `prettier --write` always updates to an emoji 🤷‍♂️

Co-authored-by: Rafe Goldberg <rafegoldberg@gmail.com>

packages/markdown/components/Code/index.jsx

@@ -36,8 +36,13 @@ function Code(props) {
 
   return (
     <React.Fragment>
-      <code className={['rdmd-code', `lang-${language}`].join(' ')} data-lang={language} name={meta}>
-        {!syntaxHighlighter || <CopyCode className="fa" code={children[0]} />}
+      <code
+        className={['rdmd-code', `lang-${language}`].join(' ')}
+        data-lang={language}
+        name={meta}
+        suppressHydrationWarning={true}
+      >
+        <CopyCode className="fa" code={children[0]} />
         {syntaxHighlighter ? syntaxHighlighter(children[0], language, { tokenizeVariables: true }) : children[0]}
       </code>
     </React.Fragment>

packages/markdown/processor/parse/flavored/callout.js

@@ -22,9 +22,8 @@ function tokenizer(eat, value) {
     '\uD83D\uDED1': 'error',
     '\u2049\uFE0F': 'error',
     '\u203C\uFE0F': 'error',
-    // NOTE: prettier is desperate to convert this in to an emoji.
-    //       PLEASE DON'T COMMIT THIS OR YOU'LL BREAK README IN IE!
-    '\u2139\uFE0F': 'info', // prettier-ignore
+    // prettier-ignore
+    '\u2139\uFE0F': 'info',
     '\u26A0': 'warn',
   }[icon];