docusaurus-theme-openapi-docs 0.0.0-690 → 0.0.0-691

package/lib/theme/ApiExplorer/Body/index.js

@@ -23,6 +23,7 @@ const FormTextInput_1 = __importDefault(
 );
 const LiveEditor_1 = __importDefault(require("@theme/ApiExplorer/LiveEditor"));
 const hooks_1 = require("@theme/ApiItem/hooks");
+const Markdown_1 = __importDefault(require("@theme/Markdown"));
 const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
 const xml_formatter_1 = __importDefault(require("xml-formatter"));
@@ -296,6 +297,10 @@ function Body({
         react_1.default.createElement(
           TabItem_1.default,
           { label: "Example", value: "example" },
+          example.summary &&
+            react_1.default.createElement(Markdown_1.default, {
+              children: example.summary,
+            }),
           exampleBody &&
             react_1.default.createElement(
               LiveEditor_1.default,
@@ -337,7 +342,9 @@ function Body({
                 key: example.label,
               },
               example.summary &&
-                react_1.default.createElement("p", null, example.summary),
+                react_1.default.createElement(Markdown_1.default, {
+                  children: example.summary,
+                }),
               example.body &&
                 react_1.default.createElement(
                   LiveEditor_1.default,

package/lib/theme/Markdown/index.js

@@ -0,0 +1,37 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+
+import CodeBlock from "@theme/CodeBlock";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+function Markdown({ children }) {
+  return (
+    <div>
+      <ReactMarkdown
+        children={children}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+export default Markdown;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-690",
+  "version": "0.0.0-691",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -43,7 +43,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-690",
+    "docusaurus-plugin-openapi-docs": "0.0.0-691",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "68d6bc5c3e39aba589cdebe0189820179be60c18"
+  "gitHead": "0efa8b9103c85f438c102118dcb9b6a701a0c375"
 }

package/src/theme/ApiExplorer/Body/index.tsx

@@ -14,6 +14,7 @@ import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import Markdown from "@theme/Markdown";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
@@ -303,6 +304,7 @@ function Body({
           </TabItem>
           {/* @ts-ignore */}
           <TabItem label="Example" value="example">
+            {example.summary && <Markdown children={example.summary} />}
             {exampleBody && (
               <LiveApp
                 action={dispatch}
@@ -340,7 +342,7 @@ function Body({
                 value={example.label}
                 key={example.label}
               >
-                {example.summary && <p>{example.summary}</p>}
+                {example.summary && <Markdown children={example.summary} />}
                 {example.body && (
                   <LiveApp action={dispatch} language={language}>
                     {example.body}

package/src/theme/Markdown/index.js

@@ -0,0 +1,37 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+
+import CodeBlock from "@theme/CodeBlock";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+function Markdown({ children }) {
+  return (
+    <div>
+      <ReactMarkdown
+        children={children}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          pre: "div",
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            if (inline) return <code>{children}</code>;
+            return !inline && match ? (
+              <CodeBlock className={className}>{children}</CodeBlock>
+            ) : (
+              <CodeBlock>{children}</CodeBlock>
+            );
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+export default Markdown;

package/src/theme-openapi.d.ts

@@ -63,6 +63,10 @@ declare module "@theme/SchemaTabs" {
   export default function SchemaTabs(props: any): JSX.Element;
 }
 
+declare module "@theme/Markdown" {
+  export default function Markdown(props: any): JSX.Element;
+}
+
 declare module "@theme/ApiExplorer/Accept" {
   export default function Accept(): JSX.Element;
 }