syntax highlighting lang auto detection

3 files changed, 52 insertions, 223 deletions

diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json
index 4efdd1da..85b8633b 100644
--- a/extension/react-app/package-lock.json
+++ b/extension/react-app/package-lock.json
@@ -674,59 +674,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@redis/bloom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
-      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/client": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.5.8.tgz",
-      "integrity": "sha512-xzElwHIO6rBAqzPeVnCzgvrnBEcFL1P0w8P65VNLRkdVW8rOE58f52hdj0BDgmsdOm4f1EoXPZtH4Fh7M/qUpw==",
-      "dependencies": {
-        "cluster-key-slot": "1.1.2",
-        "generic-pool": "3.9.0",
-        "yallist": "4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@redis/graph": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
-      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/json": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
-      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/search": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.3.tgz",
-      "integrity": "sha512-4Dg1JjvCevdiCBTZqjhKkGoC5/BcB7k9j99kdMnaXFXg8x4eyOIVg9487CMv7/BUVkFLZCaIh8ead9mU15DNng==",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/time-series": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.4.tgz",
-      "integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
     "node_modules/@styled-icons/heroicons-outline": {
       "version": "10.47.0",
       "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-outline/-/heroicons-outline-10.47.0.tgz",
@@ -1345,27 +1292,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/classifier": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/classifier/-/classifier-0.1.0.tgz",
-      "integrity": "sha512-lHoacZqTxberxbsaT/bDkvUicTl6nVTqnM5X6PhCTCg6Y3uhd/lWqbtMvHwe0W0vGkPWCVw5NTUTi3SOlccaSA==",
-      "deprecated": "Package no longer supported. Contact support@npmjs.com for more info.",
-      "dependencies": {
-        "redis": ">=0.7.0",
-        "underscore": ">=1.1.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/cluster-key-slot": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
-      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1721,14 +1647,6 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
-    "node_modules/generic-pool": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
-      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2026,22 +1944,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/language-classifier": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/language-classifier/-/language-classifier-0.0.1.tgz",
-      "integrity": "sha512-myU10NLx/dfATa7b0NJiycU4jlU15fMLcnfXYEO6NPMhH1vHYKMp9eoRZaQMDTu3bz25bD31Q9klsf26oOW1BQ==",
-      "dependencies": {
-        "classifier": "~0.1.0"
-      }
-    },
-    "node_modules/language-detect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/language-detect/-/language-detect-1.1.0.tgz",
-      "integrity": "sha512-2kXHOATTovlwlh1LJE21DLyGiuvX6bK8CYw9kEyui2FeNBV3EYD2OE9h1ChuWNGXe/TGcm7PqpK/32S614R1Kg==",
-      "dependencies": {
-        "language-classifier": "0.0.1"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -3068,19 +2970,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/redis": {
-      "version": "4.6.7",
-      "resolved": "https://registry.npmjs.org/redis/-/redis-4.6.7.tgz",
-      "integrity": "sha512-KrkuNJNpCwRm5vFJh0tteMxW8SaUzkm5fBH7eL5hd/D0fAkzvapxbfGPP/r+4JAXdQuX7nebsBkBqA2RHB7Usw==",
-      "dependencies": {
-        "@redis/bloom": "1.2.0",
-        "@redis/client": "1.5.8",
-        "@redis/graph": "1.1.0",
-        "@redis/json": "1.0.4",
-        "@redis/search": "1.1.3",
-        "@redis/time-series": "1.0.4"
-      }
-    },
     "node_modules/refractor": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
@@ -3408,11 +3297,6 @@
         "node": ">=4.2.0"
       }
     },
-    "node_modules/underscore": {
-      "version": "1.13.6",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
-      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
-    },
     "node_modules/unified": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
@@ -3661,11 +3545,6 @@
         "node": ">=0.4"
       }
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -4049,46 +3928,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@redis/bloom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
-      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
-      "requires": {}
-    },
-    "@redis/client": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.5.8.tgz",
-      "integrity": "sha512-xzElwHIO6rBAqzPeVnCzgvrnBEcFL1P0w8P65VNLRkdVW8rOE58f52hdj0BDgmsdOm4f1EoXPZtH4Fh7M/qUpw==",
-      "requires": {
-        "cluster-key-slot": "1.1.2",
-        "generic-pool": "3.9.0",
-        "yallist": "4.0.0"
-      }
-    },
-    "@redis/graph": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
-      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
-      "requires": {}
-    },
-    "@redis/json": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
-      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
-      "requires": {}
-    },
-    "@redis/search": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.3.tgz",
-      "integrity": "sha512-4Dg1JjvCevdiCBTZqjhKkGoC5/BcB7k9j99kdMnaXFXg8x4eyOIVg9487CMv7/BUVkFLZCaIh8ead9mU15DNng==",
-      "requires": {}
-    },
-    "@redis/time-series": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.4.tgz",
-      "integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==",
-      "requires": {}
-    },
     "@styled-icons/heroicons-outline": {
       "version": "10.47.0",
       "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-outline/-/heroicons-outline-10.47.0.tgz",
@@ -4484,20 +4323,6 @@
         }
       }
     },
-    "classifier": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/classifier/-/classifier-0.1.0.tgz",
-      "integrity": "sha512-lHoacZqTxberxbsaT/bDkvUicTl6nVTqnM5X6PhCTCg6Y3uhd/lWqbtMvHwe0W0vGkPWCVw5NTUTi3SOlccaSA==",
-      "requires": {
-        "redis": ">=0.7.0",
-        "underscore": ">=1.1.0"
-      }
-    },
-    "cluster-key-slot": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
-      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA=="
-    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4770,11 +4595,6 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
-    "generic-pool": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
-      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g=="
-    },
     "glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4972,22 +4792,6 @@
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
     },
-    "language-classifier": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/language-classifier/-/language-classifier-0.0.1.tgz",
-      "integrity": "sha512-myU10NLx/dfATa7b0NJiycU4jlU15fMLcnfXYEO6NPMhH1vHYKMp9eoRZaQMDTu3bz25bD31Q9klsf26oOW1BQ==",
-      "requires": {
-        "classifier": "~0.1.0"
-      }
-    },
-    "language-detect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/language-detect/-/language-detect-1.1.0.tgz",
-      "integrity": "sha512-2kXHOATTovlwlh1LJE21DLyGiuvX6bK8CYw9kEyui2FeNBV3EYD2OE9h1ChuWNGXe/TGcm7PqpK/32S614R1Kg==",
-      "requires": {
-        "language-classifier": "0.0.1"
-      }
-    },
     "lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -5598,19 +5402,6 @@
         "picomatch": "^2.2.1"
       }
     },
-    "redis": {
-      "version": "4.6.7",
-      "resolved": "https://registry.npmjs.org/redis/-/redis-4.6.7.tgz",
-      "integrity": "sha512-KrkuNJNpCwRm5vFJh0tteMxW8SaUzkm5fBH7eL5hd/D0fAkzvapxbfGPP/r+4JAXdQuX7nebsBkBqA2RHB7Usw==",
-      "requires": {
-        "@redis/bloom": "1.2.0",
-        "@redis/client": "1.5.8",
-        "@redis/graph": "1.1.0",
-        "@redis/json": "1.0.4",
-        "@redis/search": "1.1.3",
-        "@redis/time-series": "1.0.4"
-      }
-    },
     "refractor": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
@@ -5831,11 +5622,6 @@
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
-    "underscore": {
-      "version": "1.13.6",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
-      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
-    },
     "unified": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
@@ -5982,11 +5768,6 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index 98760fbd..b0de13ac 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -61,9 +61,55 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
   );
 }
 
-function CodeBlock(props: { language?: string; children: string }) {
+function CodeBlock(props: { children: string }) {
+  const [result, setResult] = useState<AutoHighlightResult | undefined>(
+    undefined
+  );
   useEffect(() => {
-    hljs.highlightAll();
+    const result = hljs.highlightAuto(
+      (props.children as any).props.children[0],
+      [
+        "python",
+        "javascript",
+        "typescript",
+        "bash",
+        "html",
+        "css",
+        "json",
+        "yaml",
+        "markdown",
+        "sql",
+        "java",
+        "c",
+        "cpp",
+        "csharp",
+        "go",
+        "kotlin",
+        "php",
+        "ruby",
+        "rust",
+        "scala",
+        "swift",
+        "dart",
+        "haskell",
+        "perl",
+        "r",
+        "matlab",
+        "powershell",
+        "lua",
+        "elixir",
+        "clojure",
+        "groovy",
+        "julia",
+        "vbnet",
+        "objectivec",
+        "fsharp",
+        "erlang",
+        "ocaml",
+      ]
+    );
+    console.log(result);
+    setResult(result);
   }, [props.children]);
   const [hovered, setHovered] = useState<boolean>(false);
 
@@ -82,7 +128,9 @@ function CodeBlock(props: { language?: string; children: string }) {
           textToCopy={(props.children as any).props.children[0]}
         />
       </CopyButtonDiv>
-      <StyledCode language={props.language}>{props.children}</StyledCode>
+      <StyledCode language={result?.language}>
+        {(props.children as any).props.children[0]}
+      </StyledCode>
     </StyledPre>
   );
 }
diff --git a/extension/react-app/src/components/StyledCode.tsx b/extension/react-app/src/components/StyledCode.tsx
index 485c70b6..c5ed0101 100644
--- a/extension/react-app/src/components/StyledCode.tsx
+++ b/extension/react-app/src/components/StyledCode.tsx
@@ -12,7 +12,7 @@ const StyledCode = (props: StyledCodeProps) => (
     style={highlightStyle}
     language={props.language || "python"}
   >
-    {(props.children as any).props.children}
+    {props.children}
   </SyntaxHighlighter>
 );