feat: syntax highlighter

juspay · Jan 24, 2024 · 4e71e21 · 4e71e21
1 parent 0ce1d05
commit 4e71e21
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "react-final-form": "^6.5.9",
     "react-ga4": "^2.0.0",
     "react-pdf": "^7.3.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-virtualized-auto-sizer": "^1.0.11",
     "react-window": "^1.8.8",
     "recoil": "^0.1.2",

diff --git a/src/libraries/ReactSyntaxHighlighter.res b/src/libraries/ReactSyntaxHighlighter.res
@@ -0,0 +1,26 @@
+type editorStyle
+
+@module("react-syntax-highlighter/dist/esm/styles/hljs")
+external lightfair: editorStyle = "googlecode"
+
+type style = {
+  backgroundColor?: string,
+  lineHeight?: string,
+  fontSize?: string,
+  paddingLeft?: string,
+  padding?: string,
+}
+
+module SyntaxHighlighter = {
+  @module("react-syntax-highlighter") @react.component
+  external make: (
+    ~language: string=?,
+    ~style: editorStyle=?,
+    ~customStyle: style=?,
+    ~showLineNumbers: bool=?,
+    ~wrapLines: bool=?,
+    ~wrapLongLines: bool=?,
+    ~lineNumberContainerStyle: style=?,
+    ~children: string,
+  ) => React.element = "default"
+}
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -48,15 +48,23 @@ module PrettyPrintJson = {
               {copyParsedJson}
             </div>
           </UIUtils.RenderIf>
-          <div className="flex items-start justify-between">
-            <pre
-              className={`${overrideBackgroundColor} p-3 text-jp-gray-900 dark:bg-jp-gray-950 dark:bg-opacity-100 ${isTextVisible
-                  ? "overflow-visible "
-                  : `overflow-clip  h-fit ${maxHeightClass}`} text-fs-13 text font-medium`}>
-              {parsedJson->React.string}
-            </pre>
-            {copyParsedJson}
-          </div>
+          <ReactSyntaxHighlighter.SyntaxHighlighter
+            style={ReactSyntaxHighlighter.lightfair}
+            language="json"
+            showLineNumbers={true}
+            lineNumberContainerStyle={{
+              paddingLeft: "0px",
+              backgroundColor: "red",
+              padding: "100px",
+            }}
+            customStyle={{
+              backgroundColor: "transparent",
+              lineHeight: "1.7rem",
+              fontSize: "0.875rem",
+              padding: "5px",
+            }}>
+            {parsedJson}
+          </ReactSyntaxHighlighter.SyntaxHighlighter>
           <Button
             text={isTextVisible ? "Hide" : "See more"}
             customButtonStyle="h-6 w-8 flex flex-1 justify-center m-1"