fix: add syntax highlighted markdown

Author: shanejonas

jest.config.js

@@ -7,7 +7,8 @@ module.exports = {
   "testEnvironment": "jsdom",
   "testPathIgnorePatterns": ["./build"],
   "preset": "ts-jest",
+  "transformIgnorePatterns": ['^.+\\.js$'],
   "moduleNameMapper": {
-    "\\.(css|less|sass|scss)$": "jest-transform-css"
-  }
-}
+    "\\.(css|less|sass|scss)$": "jest-transform-css",
+  },
+};

package-lock.json

@@ -16,6 +16,7 @@
     "@material-ui/lab": "4.0.0-alpha.47",
     "@material-ui/styles": "^4.7.1",
     "@open-rpc/examples": "^1.6.1",
+    "@types/react-syntax-highlighter": "^13.5.0",
     "@xops.net/json-schema-to-react-tree": "^1.0.2",
     "hash-color-material": "^1.1.3",
     "jest-transform-css": "^2.0.0",
@@ -24,7 +25,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-json-view": "^1.19.1",
-    "react-markdown": "^4.0.6"
+    "react-markdown": "^4.0.6",
+    "react-syntax-highlighter": "^15.3.0"
   },
   "devDependencies": {
     "@open-rpc/meta-schema": "^1.11.0",

package.json

@@ -9,6 +9,7 @@ import ReactMarkdown from "react-markdown";
 import JSONSchemaTree from "@xops.net/json-schema-to-react-tree";
 import { ContentDescriptorObject } from "@open-rpc/meta-schema";
 import "./ContentDescriptor.css";
+import MarkdownDescription from "../MarkdownDescription/MarkdownDescription";
 
 const styles = (theme: Theme) => ({
   description: {
@@ -60,7 +61,11 @@ class ContentDescriptor extends Component<IProps> {
         <ExpansionPanelDetails style={{ display: "block", overflowX: "auto" }}>
           <>
             {contentDescriptor.description &&
-              <ReactMarkdown source={contentDescriptor.description} className={classes.description} />
+              <MarkdownDescription
+                uiSchema={uiSchema}
+                source={contentDescriptor.description}
+                className={classes.description}
+                />
             }
             {contentDescriptor.schema &&
               <>

src/ContentDescriptor/ContentDescriptor.tsx

@@ -5,13 +5,15 @@ import ReactJson from "react-json-view";
 import ReactMarkdown from "react-markdown";
 import { ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
 import _ from "lodash";
+import MarkdownDescription from "../MarkdownDescription/MarkdownDescription";
 
 export type TParamStructure = "either" | "by-name" | "by-position";
 
 interface IProps extends WithStyles<typeof styles> {
   examplePairing?: ExamplePairingObject;
   paramStructure?: TParamStructure;
   methodName?: string;
+  uiSchema?: any;
   reactJsonOptions?: any;
 }
 
@@ -23,7 +25,7 @@ const styles = (theme: Theme) => ({
 
 class ExamplePairing extends Component<IProps, {}> {
   public render() {
-    const { examplePairing, paramStructure, classes, methodName } = this.props;
+    const { examplePairing, paramStructure, classes, methodName, uiSchema } = this.props;
     if (_.isUndefined(examplePairing)) {
       return null;
     }
@@ -40,7 +42,11 @@ class ExamplePairing extends Component<IProps, {}> {
     return (
       <Grid container spacing={10}>
         <Grid item xs={12}>
-          <ReactMarkdown source={examplePairing.description} className={classes.description} />
+          <MarkdownDescription
+            uiSchema={uiSchema}
+            source={examplePairing.description}
+            className={classes.description}
+          />
         </Grid>
         <Grid item xs={6}>
           <Card>