Allow 2.0 tutorials to use mermaid diagrams

src/components/PreProxy/index.astro

@@ -0,0 +1,20 @@
+---
+// Conditionally process pre blocks with CodeBlockWrapper or leave untouched.
+// Not all pre blocks should be rendered by the CodeBlockWrapper.
+// For example, mermaid diagram declarations should be left alone so that mermaid can process them.  
+//   In those cases, the diagram source isn't intended for the user.
+
+import CodeBlockWrapper from '../CodeBlockWrapper/index.astro';
+
+const props = Astro.props;
+
+// Check if this is a mermaid block
+// The 'data-language' or 'class' usually contains the language name
+const isMermaid = props.class?.includes('mermaid') || props['data-language'] === 'mermaid';
+---
+
+{isMermaid ? (
+  <pre {...props}><slot /></pre>
+) : (
+  <CodeBlockWrapper {...props}><slot /></CodeBlockWrapper>
+)}

src/layouts/TutorialLayout.astro

@@ -4,6 +4,7 @@ import Head from "@components/Head/index.astro";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { setJumpToState } from "../globals/state";
 import FreeRatioImage from "@components/Image/FreeRatioImage.astro";
+import PreProxy from "@components/PreProxy/index.astro";
 import CodeBlockWrapper from "@components/CodeBlockWrapper/index.astro";
 import LinkWrapper from "@components/LinkWrapper/index.astro";
 import RelatedItems from "@components/RelatedItems/index.astro";
@@ -68,7 +69,7 @@ const relatedExamples =
       components={{
         ...components,
         img: FreeRatioImage,
-        pre: CodeBlockWrapper,
+        pre: PreProxy,
         a: LinkWrapper,
       }}
     />