feat: highlight code

us3r-network · Jul 7, 2023 · 9a51a55 · 9a51a55
1 parent 40ea43f
commit 9a51a55
Show file tree

Hide file tree

Showing 5 changed files with 372 additions and 13 deletions.
diff --git a/packages/client/scan/package.json b/packages/client/scan/package.json
@@ -18,6 +18,7 @@
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.191",
     "@types/node": "^16.7.13",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
@@ -34,6 +35,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.36.1",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.0-alpha.5",
     "react-device-detect": "^2.2.2",

diff --git a/packages/client/scan/src/components/ModelView/Definition.tsx b/packages/client/scan/src/components/ModelView/Definition.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import styled from 'styled-components'
+import Prism from 'prismjs'
 import FileSaver from 'file-saver'
 import { GraphQLEditor, PassedSchema } from 'graphql-editor'
 import { getModelInfo, queryModelGraphql } from '../../api'
@@ -9,6 +10,10 @@ import { schemas } from '../../utils/composedb-types/schemas'
 import { AxiosError } from 'axios'
 import { useCeramicCtx } from '../../context/CeramicCtx'
 
+import 'prismjs/components/prism-typescript'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
 export default function Definition() {
   const { streamId } = useParams()
   const { network } = useCeramicCtx()
@@ -116,9 +121,10 @@ export default function Definition() {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>{JSON.stringify(modelData.composite, null, 2)}</code>
-              </pre>
+              <Code
+                name="composite"
+                content={JSON.stringify(modelData.composite, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -139,11 +145,10 @@ export default function Definition() {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(modelData.runtimeDefinition, null, 2)}
-                </code>
-              </pre>
+              <Code
+                name="runtimeDefinition"
+                content={JSON.stringify(modelData.runtimeDefinition, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -152,6 +157,34 @@ export default function Definition() {
   )
 }
 
+export function Code({ name, content }: { name: string; content: string }) {
+  useEffect(() => {
+    Prism.highlightAll()
+  }, [content])
+
+  const preCode = `<pre class="line-numbers"><code class="language-typescript">${content}</code></pre>`
+  return (
+    <CodeBox>
+      <div
+        className="line-numbers"
+        dangerouslySetInnerHTML={{ __html: preCode }}
+      ></div>
+    </CodeBox>
+  )
+}
+
+const CodeBox = styled.div`
+  > .name {
+    border-bottom: none;
+    display: inline-block;
+    padding: 10px 20px;
+  }
+  > .line-numbers {
+    overflow: scroll;
+    /* margin-bottom: 20px; */
+  }
+`
+
 const EditorBox = styled.div`
   height: calc(100vh - 300px);
   max-height: 800px;
@@ -175,10 +208,10 @@ const ResultBox = styled.div`
     border: 1px solid #39424c;
     border-radius: 20px;
   }
-  div {
+  > div {
     width: calc(50% - 10px);
     margin: 20px 0px;
-    padding: 10px;
+    /* padding: 10px; */
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
@@ -192,7 +225,8 @@ const ResultBox = styled.div`
       line-height: 28px;
       font-style: italic;
       color: #ffffff;
-
+      padding: 10px;
+      box-sizing: border-box;
       button {
         background: #ffffff;
       }
@@ -204,10 +238,14 @@ const ResultBox = styled.div`
     }
   }
   .result-text {
-    width: 100%;
     word-wrap: break-word;
     color: #718096;
     overflow: scroll;
+    width: 100%;
+    margin-top: 0;
+    > div {
+      width: fit-content;
+    }
   }
 
   button {

diff --git a/packages/client/scan/src/container/ModelView.tsx b/packages/client/scan/src/container/ModelView.tsx
@@ -155,7 +155,7 @@ export default function ModelView() {
       <div className="title-bar">
         <ToolsBox>
           <span>{modelStream?.streamContent?.name}</span>
-          {!isIndexed && <button onClick={startIndex}>Strat index</button>}
+          {!isIndexed && <button onClick={startIndex}>Start index</button>}
         </ToolsBox>
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>

diff --git a/packages/client/scan/src/index.tsx b/packages/client/scan/src/index.tsx
@@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom'
 import './styles/index.css'
 import './styles/select.css'
 import './styles/tab.css'
+import './styles/prism-vsc-dark-plus.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'