Add syntax highlighting

Author: pomber

sites/docs/package.json

@@ -7,6 +7,7 @@
     "code-surfer": "3.0.0-beta.1",
     "gatsby": "^2.15.28",
     "gatsby-theme-mdx-deck": "^3.0.13",
+    "prism-react-renderer": "^1.0.2",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
     "react-vista": "^0.1.1"

sites/docs/src/home/code-block.js

@@ -0,0 +1,69 @@
+import React from "react";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+export default ({ children, className }) => {
+  const language = className.replace(/language-/, "");
+  return (
+    <Highlight
+      {...defaultProps}
+      code={children.trim()}
+      language={language}
+      theme={theme}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={className}
+          style={{
+            ...style,
+            padding: "20px",
+            border: "1px solid #999",
+            borderRadius: "5px",
+            overflow: "auto"
+          }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+
+const theme = {
+  plain: {
+    color: "rgb(57, 58, 52)",
+    backgroundColor: "rgb(246, 248, 250)"
+  },
+  styles: [
+    {
+      types: [
+        "builtin",
+        "changed",
+        "keyword",
+        "punctuation",
+        "operator",
+        "tag",
+        "deleted",
+        "string",
+        "attr-value",
+        "char",
+        "number",
+        "inserted"
+      ],
+      style: {
+        color: "rgb(0, 164, 219)"
+      }
+    },
+    {
+      types: ["comment"],
+      style: {
+        fontStyle: "italic"
+      }
+    }
+  ]
+};

sites/docs/src/home/docs.js

@@ -1,12 +1,17 @@
 import React from "react";
 import Readme from "./readme.mdx";
-import { MDXRenderer } from "gatsby-plugin-mdx";
+import { MDXProvider } from "@mdx-js/react";
+import CodeBlock from "./code-block";
+
+const components = { pre: props => <div {...props} />, code: CodeBlock };
 
 export default function Docs() {
   return (
     <div style={{ display: "flex", justifyContent: "center" }}>
       <div style={{ maxWidth: "800px", width: "90%" }}>
-        <Readme />
+        <MDXProvider components={components}>
+          <Readme />
+        </MDXProvider>
       </div>
     </div>
   );

sites/docs/src/home/readme.mdx

@@ -200,7 +200,7 @@ export default {
         "comment cdata doctype": {
           fontStyle: "italic"
         },
-        "builtin changed keyword punctuation operator tag deleted string attr-value char number inserted": {
+        "builtin changed keyword punctuation operator tag deleted string char number inserted": {
           color: "primary"
         }
       },

yarn.lock

@@ -11996,6 +11996,11 @@ pretty-quick@^1.11.1:
     mri "^1.1.0"
     multimatch "^3.0.0"
 
+prism-react-renderer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.2.tgz#3bb9a6a42f76fc049b03266298c7068fdd4b7ea9"
+  integrity sha512-0++pJyRfu4v2OxI/Us/5RLui9ESDkTiLkVCtKuPZYdpB8UQWJpnJQhPrWab053XtsKW3oM0sD69uJ6N9exm1Ag==
+
 prismjs@^1.16.0, prismjs@^1.8.4, prismjs@~1.17.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"