Merge pull request #404 from open-rpc/fix/add-syntax-highlighted-mark…

…ddown

fix: add syntax highlighted markdown

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.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.4.3"
   },
   "devDependencies": {
     "@open-rpc/meta-schema": "^1.11.0",

src/ContentDescriptor/ContentDescriptor.tsx

@@ -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 &&
               <>