From 6b0df6578665e0c2076e3fd8c81431543cb0a4c4 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Mon, 12 Apr 2021 19:33:38 +0300
Subject: [PATCH] fix(v2): render escaped HTML entities inside code properly
 (#4598)

---
 .../src/theme/MDXComponents/index.tsx         | 25 +++++++++++++------
 .../src/pages/examples/markdownPageExample.md | 22 ++++++++++++++++
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
index 8d51e334a5..818fcc3049 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -14,17 +14,28 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
 const MDXComponents: MDXComponentsObject = {
   code: (props) => {
     const {children} = props;
-    if (typeof children === 'string') {
-      if (!children.includes('\n')) {
-        return <code {...props} />;
-      }
-      return <CodeBlock {...props} />;
+
+    // For retrocompatibility purposes (pretty rare use case)
+    // See https://github.com/facebook/docusaurus/pull/1584
+    if (isValidElement(children)) {
+      return children;
     }
-    return children;
+
+    return !children.includes('\n') ? (
+      <code {...props} />
+    ) : (
+      <CodeBlock {...props} />
+    );
   },
   a: (props) => <Link {...props} />,
   pre: (props) => {
-    const {children} = props;
+    const {children} = props as {children: any};
+
+    // See comment for `code` above
+    if (isValidElement(children?.props?.children)) {
+      return children?.props.children;
+    }
+
     return (
       <CodeBlock
         {...((isValidElement(children)
diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
index 8c92ba3fa0..eefa182e1a 100644
--- a/website/src/pages/examples/markdownPageExample.md
+++ b/website/src/pages/examples/markdownPageExample.md
@@ -200,3 +200,25 @@ function Clock(props) {
 </pre>
 
 ## Custom heading id {#custom}
+
+## Children elements inside pre/code elements
+
+See https://github.com/facebook/docusaurus/pull/1584
+
+<pre><code>
+  <BrowserWindow url="http://localhost:3000" >
+    Lol bro
+  </BrowserWindow>
+</code></pre>
+
+<code>
+  <BrowserWindow url="http://localhost:3000" >
+    Lol bro
+  </BrowserWindow>
+</code>
+
+## Pipe
+
+Code tag + double pipe: <code>&#124;&#124;</code>
+
+Code tag + double pipe: <code>||</code>