chore: support markdown in all descriptions

Author: cjbell

components/ApiReference/ApiReferenceMethod/ApiReferenceMethod.tsx

@@ -1,5 +1,6 @@
 import type { OpenAPIV3 } from "@scalar/openapi-types";
 import { useState } from "react";
+import Markdown from "react-markdown";
 
 import { Endpoint } from "../../Endpoints";
 import { ContentColumn, ExampleColumn, Section } from "../../ApiSections";
@@ -45,7 +46,7 @@ function ApiReferenceMethod({ methodName, methodType, endpoint }: Props) {
   return (
     <Section title={method.summary} slug={method.summary}>
       <ContentColumn>
-        <p>{method.description}</p>
+        <Markdown>{method.description}</Markdown>
 
         <h3 className="!text-sm font-medium">Endpoint</h3>
 
@@ -85,7 +86,7 @@ function ApiReferenceMethod({ methodName, methodType, endpoint }: Props) {
                 <PropertyRow.Type>{responseSchema.title}</PropertyRow.Type>
               </PropertyRow.Header>
               <PropertyRow.Description>
-                {responseSchema.description}
+                <Markdown>{responseSchema.description}</Markdown>
               </PropertyRow.Description>
 
               {responseSchema.properties && (

components/ApiReference/SchemaProperties/PropertyRow.tsx

@@ -34,7 +34,9 @@ const Type = ({ children }) => (
 );
 
 const Description = ({ children }) => (
-  <div className="text-sm text-gray-500 dark:text-gray-300">{children}</div>
+  <div className="text-sm text-gray-500 dark:text-gray-300 schema-property-description">
+    {children}
+  </div>
 );
 
 const Required = () => (

components/ApiReference/SchemaProperties/SchemaProperty.tsx

@@ -1,6 +1,7 @@
 import { OpenAPIV3 } from "@scalar/openapi-types";
 import { PropertyRow } from "./PropertyRow";
 import { useState } from "react";
+import Markdown from "react-markdown";
 import {
   getTypesForDisplay,
   innerEnumSchema,
@@ -46,7 +47,9 @@ const SchemaProperty = ({ name, schema }: Props) => {
           <PropertyRow.Required>Required</PropertyRow.Required>
         )}
       </PropertyRow.Header>
-      <PropertyRow.Description>{schema.description}</PropertyRow.Description>
+      <PropertyRow.Description>
+        <Markdown>{schema.description}</Markdown>
+      </PropertyRow.Description>
 
       {maybeEnum && (
         <>

styles/index.css

@@ -159,3 +159,15 @@ body {
 .prose-sm ul {
   list-style-type: disc;
 }
+
+.schema-property-description p {
+  margin-top: 0 !important;
+}
+
+.schema-property-description p:last-child {
+  margin-bottom: 0 !important;
+}
+
+.schema-property-description code {
+  font-size: 11px;
+}