diff --git a/__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png b/__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png
index a1e6e36a9..125752037 100644
Binary files a/__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png and b/__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png differ
diff --git a/components/Code/index.tsx b/components/Code/index.tsx
index e489094cf..5a15958bc 100644
--- a/components/Code/index.tsx
+++ b/components/Code/index.tsx
@@ -57,6 +57,10 @@ const Code = (props: CodeProps) => {
const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts, { mdx: true }) : code;
+ if (language === 'mermaid') {
+ return code;
+ }
+
return (
<>
{copyButtons && }
diff --git a/components/Code/style.scss b/components/Code/style.scss
index bdcf50123..64a99aca9 100644
--- a/components/Code/style.scss
+++ b/components/Code/style.scss
@@ -84,6 +84,12 @@
word-wrap: normal;
}
+ pre.mermaid {
+ &_single {
+ background: var(--color-bg-page, white);
+ }
+ }
+
kbd {
background-color: $background;
background-color: var(--d-code-background, $background);
diff --git a/components/CodeTabs/index.tsx b/components/CodeTabs/index.tsx
index c5769aeb6..236e5985c 100644
--- a/components/CodeTabs/index.tsx
+++ b/components/CodeTabs/index.tsx
@@ -1,9 +1,17 @@
import { uppercase } from '@readme/syntax-highlighter';
-import React from 'react';
+import React, { useEffect } from 'react';
+import mermaid from 'mermaid';
const CodeTabs = props => {
const { children, theme } = props;
+ // set Mermaid theme
+ useEffect(() => {
+ mermaid.initialize({
+ theme: theme === 'dark' ? 'dark' : 'default',
+ });
+ }, [theme])
+
function handleClick({ target }, index: number) {
const $wrap = target.parentElement.parentElement;
const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -14,6 +22,21 @@ const CodeTabs = props => {
codeblocks[index].classList.add('CodeTabs_active');
target.classList.add('CodeTabs_active');
+
+ if (target.value === 'mermaid') {
+ const $openMermaid = [].slice.call($wrap.querySelectorAll('.mermaid'));
+ $openMermaid.forEach((el: Element) => el.classList.remove('mermaid'));
+ codeblocks[index].classList.add('mermaid');
+ mermaid.contentLoaded();
+ }
+ }
+
+ // render single Mermaid diagram
+ if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
+ const value = children.props.children.props.value;
+ return (
+ {value}
+ )
}
return (
@@ -24,7 +47,7 @@ const CodeTabs = props => {
/* istanbul ignore next */
return (
-