fix: add markdown code syntax highlighting

Author: shanejonas

package-lock.json

@@ -26,7 +26,7 @@
     "react-dom": "^16.12.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-syntax-highlighter": "^15.3.0"
+    "react-syntax-highlighter": "^15.4.3"
   },
   "devDependencies": {
     "@open-rpc/meta-schema": "^1.11.0",

package.json

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Grid from "@material-ui/core/Grid";
-import { Card, CardContent, Theme, withStyles, WithStyles } from "@material-ui/core";
+import { Card, CardContent, CardHeader, Theme, withStyles, WithStyles } from "@material-ui/core";
 import ReactJson from "react-json-view";
 import ReactMarkdown from "react-markdown";
 import { ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
@@ -48,8 +48,9 @@ class ExamplePairing extends Component<IProps, {}> {
             className={classes.description}
           />
         </Grid>
-        <Grid item xs={6}>
+        <Grid item xs={12} sm={6}>
           <Card>
+            <CardHeader title="Request"></CardHeader>
             <CardContent>
               {examplePairing.params && <ReactJson src={{
                 id: 1,
@@ -60,7 +61,8 @@ class ExamplePairing extends Component<IProps, {}> {
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={6}>
+        <Grid item xs={12} sm={6}>
+          <CardHeader title="Result"></CardHeader>
           <Card>
             <CardContent>
               {examplePairing.result && <ReactJson src={{

src/ExamplePairing/ExamplePairing.tsx

@@ -2,30 +2,34 @@ import React from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialDark, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import ReactMarkdown from "react-markdown";
-import { MethodObject } from "@open-rpc/meta-schema";
+import { Container } from "@material-ui/core";
 
 interface IProps {
   className?: string;
   source?: string;
   uiSchema: any;
 }
 
-const MarkdownDescription: React.FC<IProps> = ({source, className, uiSchema}) => {
-  return (
-    <ReactMarkdown
-      renderers={{
-        code: ({ language, value }) => {
-          return <SyntaxHighlighter
-            style={uiSchema && uiSchema.appBar["ui:darkMode"] ? materialDark : materialLight}
-            language={language}
-            children={value}
-          />;
-        },
-      }}
-      source={source}
-      className={className}
-    />
-  );
+const MarkdownDescription: React.FC<IProps> = ({ source, className, uiSchema }) => {
+  try {
+    return (
+      <ReactMarkdown
+        renderers={{
+          code: ({ language, value }) => {
+            return <SyntaxHighlighter
+              style={uiSchema && uiSchema.appBar["ui:darkMode"] ? materialDark : materialLight}
+              language={language}
+              children={value}
+            />;
+          },
+        }}
+        source={source}
+        className={className}
+      />
+    );
+  } catch (e) {
+    return <ReactMarkdown source={source} className={className} />;
+  }
 };
 
 export default MarkdownDescription;

src/MarkdownDescription/MarkdownDescription.tsx

@@ -25,6 +25,7 @@ import MarkdownDescription from "../MarkdownDescription/MarkdownDescription";
 const styles = (theme: Theme) => ({
   description: {
     color: theme.palette.text.primary,
+    width: "100%",
   },
   heading: {
     flexBasis: "33.33%",