@readme/markdown 11.1.1 → 11.2.0

package/components/Code/index.tsx

@@ -3,6 +3,7 @@ import React, { createRef, useContext } from 'react';
 
 import CodeOptsContext from '../../contexts/CodeOpts';
 import ThemeContext from '../../contexts/Theme';
+import useHydrated from '../../hooks/useHydrated';
 
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
@@ -57,8 +58,9 @@ const Code = (props: CodeProps) => {
   const { children, lang, value } = props;
   const theme = useContext(ThemeContext);
   const copyButtons = useContext(CodeOptsContext) || props.copyButtons;
+  const isHydrated = useHydrated();
 
-  const language = canonicalLanguage(lang);
+  const language = isHydrated ? canonicalLanguage(lang) : '';
 
   const codeRef = createRef<HTMLElement>();
 
@@ -71,7 +73,7 @@ const Code = (props: CodeProps) => {
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
 
   const highlightedCode =
-    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code
+    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
       ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
       : code;
 
@@ -86,7 +88,6 @@ const Code = (props: CodeProps) => {
         ref={codeRef}
         className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
         data-lang={language}
-        suppressHydrationWarning={true}
       >
         {highlightedCode}
       </code>

package/components/CodeTabs/index.tsx

@@ -22,9 +22,12 @@ const CodeTabs = (props: Props) => {
       import('mermaid').then(module => {
         mermaid = module.default;
         mermaid.initialize({
+          startOnLoad: false,
           theme: theme === 'dark' ? 'dark' : 'default',
         });
-        mermaid.contentLoaded();
+        mermaid.run({
+          nodes: document.querySelectorAll('.mermaid-render'),
+        });
       });
     }
   }, [hasMermaid, theme]);
@@ -44,7 +47,7 @@ const CodeTabs = (props: Props) => {
   // render single Mermaid diagram
   if (hasMermaid) {
     const value = children.props.children.props.value;
-    return <pre className="mermaid mermaid_single">{value}</pre>;
+    return <pre className="mermaid-render mermaid_single">{value}</pre>;
   }
 
   return (