add syntax highlighting to the docs (#49)

README.md

@@ -57,7 +57,7 @@ The library consists of a single component it has a type like
 
 We include a variety of common projections that you might find useful
 
-```ts
+```tsx
 {
   BooleanTarget, // add check boxes to boolean
     CleanUp, // add a "clean up" button to the menu that pretty formats the code
@@ -164,15 +164,15 @@ These come in a variety of flavors
 
 - **Index Queries**:
 
-```ts
+```tsx
 { type: "index"; query: (number | string)[] }
 ```
 
 Where number|string is a key path. Note that is strictly the fastest and most accurate of the query types, as we can identify things unambiguously.
 
 - **Regex Queries**:
 
-```ts
+```tsx
 {
   type: "regex";
   query: RegExp;
@@ -183,31 +183,31 @@ Check if a value matches a regex
 
 - **Value Queries**:
 
-```ts
+```tsx
 { type: "value"; query: string[] }
 ```
 
 Check if a value is equal to any of several strings.
 
 - **Schema Queries**:
 
-```ts
+```tsx
 { type: "schemaMatch"; query: string[] }
 ```
 
 Check if a node has inferred type (from the JSON Schema) equal to one of several node types. Refer to your json schema for the names that are checked.
 
 - **Node Type Queries**:
 
-```ts
+```tsx
 { type: "nodeType"; query: NodeType[] };
 ```
 
 These queries allow you to check for a given AST node type. The JSON AST includes the following symbols: `String`, `Number`, `True`, `False`, `Null`, `Object`, `Array`, `Property`, `PropertyName`, `{`, `},` `[`, `]`, and `⚠` (which describes parse errors).
 
 - **Function Queries**:
 
-```ts
+```tsx
 {
   type: "function";
   query: (value: string, nodeType: NodeType, keyPath: KeyPath) => boolean;

package.json

@@ -19,6 +19,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^7.1.0",
+    "react-syntax-highlighter": "^15.5.0",
     "seedrandom": "^3.0.5"
   },
   "devDependencies": {
@@ -35,6 +36,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.0",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@types/seedrandom": "^3.0.5",
     "d3-array": "^3.2.1",
     "d3-scale": "^4.0.2",
@@ -85,4 +87,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ReactMarkdown from "react-markdown";
+
 import { HashRouter, Route, Routes, Link } from "react-router-dom";
 
 import "./App.css";
@@ -13,6 +13,9 @@ import VegaLiteUseCase from "./examples/VegaLiteUseCase";
 import VegaUseCase from "./examples/VegaUseCase";
 import QuietModeCompare from "./examples/QuietModeCompare";
 
+import StyledMarkdown from "./examples/StyledMarkdown";
+import ReactMarkdown from "react-markdown";
+
 import markup from "./demo-page.md";
 const routes: {
   name: string;
@@ -108,8 +111,8 @@ function Root() {
   return (
     <div className="root">
       <div className="md-container">
-        <ReactMarkdown>{postMarkdown}</ReactMarkdown>
-        <ReactMarkdown>{docs}</ReactMarkdown>
+        <StyledMarkdown content={postMarkdown} />
+        <StyledMarkdown content={docs} />
       </div>
     </div>
   );

src/examples/QuietModeCompare.tsx

@@ -3,43 +3,65 @@ import QuietModeUs from "./QuietModeUs";
 import QuietModeCodeMirror from "./QuietModeCodeMirror";
 import { produceExample } from "./example-data";
 import "../stylesheets/quiet-styles.css";
+import StyledMarkdown from "./StyledMarkdown";
 
 function QuietModeCompare() {
   const [code, setCode] = useState(produceExample);
   const [examples, setExamples] = useState({ codeMirror: "", us: "" });
   useEffect(() => {
     Promise.all(
       ["QuietModeCodeMirror.tsx", "QuietModeUs.tsx"].map((el) =>
-        fetch(el).then((x) => x.text())
+        fetch(el)
+          .then((x) => x.text())
+          .then((x) => {
+            console.log(x);
+            // return x;
+            return (
+              "```tsx" +
+              x
+                .replace(
+                  /\n/g,
+                  `
+        `
+                )
+                .split("\n")
+                .map((x) => x.slice(8))
+                .join("\n")
+            );
+          })
       )
     ).then(([codeMirror, us]) => setExamples({ codeMirror, us }));
   }, []);
   return (
-    <div className="flex" id="quiet-root">
+    <div className="flex" id="quiet-root" style={{ width: "100%" }}>
       <div
-        style={{ width: "100%", height: "100%", marginRight: "5px" }}
+        style={{
+          width: "100%",
+          height: "100%",
+          marginRight: "5px",
+          maxWidth: "50%",
+        }}
         className="flex-down"
       >
         <h1>Prong</h1>
         <h3>Lines of code {examples.us.split("\n").length}</h3>
         <QuietModeUs code={code} onChange={setCode} />
         <h3>Raw</h3>
-        <code style={{ height: "100%", overflowY: "scroll" }}>
-          {examples.us.split("\n").map((x, idx) => (
-            <div key={`${idx}-us`}>{x}</div>
-          ))}
-        </code>
+        <div style={{ height: "100%", overflowY: "scroll" }}>
+          <StyledMarkdown content={examples.us} />
+        </div>
       </div>
-      <div style={{ width: "100%", height: "100%" }} className="flex-down">
+      <div
+        style={{ width: "100%", height: "100%", maxWidth: "50%" }}
+        className="flex-down"
+      >
         <h1>Vanilla Code Mirror</h1>
         <h3>Lines of code {examples.codeMirror.split("\n").length}</h3>
         <QuietModeCodeMirror code={code} onChange={setCode} />
         <h3>Raw</h3>
-        <code style={{ height: "100%", overflowY: "scroll" }}>
-          {examples.codeMirror.split("\n").map((x, idx) => (
-            <div key={`${idx}-codemirror`}>{x}</div>
-          ))}
-        </code>
+        <div style={{ height: "100%", overflowY: "scroll" }}>
+          <StyledMarkdown content={examples.codeMirror} />
+        </div>
       </div>
     </div>
   );

src/examples/StyledMarkdown.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { xonokai } from "react-syntax-highlighter/dist/esm/styles/prism";
+import ReactMarkdown from "react-markdown";
+
+function StyledMarkdown(props: { content: string }) {
+  return (
+    <ReactMarkdown
+      components={{
+        code({ node, inline, className, children, ...props }) {
+          return !inline ? (
+            <SyntaxHighlighter
+              {...props}
+              children={String(children).replace(/\n$/, "")}
+              style={xonokai}
+              language={"jsx"}
+              PreTag="div"
+            />
+          ) : (
+            <code {...props} className={className}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {props.content}
+    </ReactMarkdown>
+  );
+}
+export default StyledMarkdown;