diff --git a/core/trino-web-ui/src/main/resources/webapp-preview/package-lock.json b/core/trino-web-ui/src/main/resources/webapp-preview/package-lock.json
index 2b7be583037..5c734bd5166 100644
--- a/core/trino-web-ui/src/main/resources/webapp-preview/package-lock.json
+++ b/core/trino-web-ui/src/main/resources/webapp-preview/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@fontsource/roboto": "^5.2.8",
+        "@monaco-editor/react": "^4.7.0",
         "@mui/icons-material": "^7.3.2",
         "@mui/material": "^7.3.2",
         "@mui/material-pigment-css": "^7.3.2",
@@ -23,16 +24,15 @@
         "react-calendar-timeline": "^0.30.0-beta.3",
         "react-dom": "^19.1.1",
         "react-router-dom": "^7.9.1",
-        "react-syntax-highlighter": "^15.6.6",
         "sass": "^1.93.2",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
         "@types/lodash": "^4.17.20",
+        "@types/lodash.merge": "^4.6.9",
         "@types/react": "^19.1.13",
         "@types/react-dom": "^19.1.9",
-        "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^8.44.1",
         "@typescript-eslint/parser": "^8.44.1",
         "@vitejs/plugin-react": "^5.0.3",
@@ -1276,6 +1276,29 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.2.tgz",
@@ -2648,15 +2671,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/hast": {
-      "version": "2.3.10",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
-      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2671,6 +2685,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash.merge": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz",
+      "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -2702,16 +2726,6 @@
         "@types/react": "^19.0.0"
       }
     },
-    "node_modules/@types/react-syntax-highlighter": {
-      "version": "15.5.13",
-      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
-      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -2721,11 +2735,12 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
+    "node_modules/@types/trusted-types": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
+      "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==",
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.44.1",
@@ -3604,36 +3619,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/character-entities": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
-      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/character-entities-legacy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
-      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/character-reference-invalid": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
-      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -3702,16 +3687,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/comma-separated-tokens": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
-      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4872,19 +4847,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fault": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
-      "license": "MIT",
-      "dependencies": {
-        "format": "^0.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5006,14 +4968,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5301,48 +5255,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-util-parse-selector": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
-      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hastscript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
-      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^2.0.0",
-        "comma-separated-tokens": "^1.0.0",
-        "hast-util-parse-selector": "^2.0.0",
-        "property-information": "^5.0.0",
-        "space-separated-tokens": "^1.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/highlightjs-vue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
-      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
-      "license": "CC0-1.0"
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -5431,30 +5343,6 @@
       "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
       "license": "ISC"
     },
-    "node_modules/is-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5595,16 +5483,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-extendable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
@@ -5676,16 +5554,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-hexadecimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
-      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -6094,20 +5962,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lowlight": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
-      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
-      "license": "MIT",
-      "dependencies": {
-        "fault": "^1.0.0",
-        "highlight.js": "~10.7.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6192,6 +6046,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.53.0.tgz",
+      "integrity": "sha512-0WNThgC6CMWNXXBxTbaYYcunj08iB5rnx4/G56UOPeL9UVIUGGHA1GR0EWIh9Ebabj7NpCRawQ5b0hfN1jQmYQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/trusted-types": "^1.0.6"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6435,24 +6299,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-      "license": "MIT",
-      "dependencies": {
-        "character-entities": "^1.0.0",
-        "character-entities-legacy": "^1.0.0",
-        "character-reference-invalid": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-hexadecimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -6589,15 +6435,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/prismjs": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
-      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6615,19 +6452,6 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
-    "node_modules/property-information": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
-      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6758,23 +6582,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-syntax-highlighter": {
-      "version": "15.6.6",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",
-      "integrity": "sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "highlight.js": "^10.4.1",
-        "highlightjs-vue": "^1.0.0",
-        "lowlight": "^1.17.0",
-        "prismjs": "^1.30.0",
-        "refractor": "^3.6.0"
-      },
-      "peerDependencies": {
-        "react": ">= 0.14.0"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6827,21 +6634,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/refractor": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
-      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
-      "license": "MIT",
-      "dependencies": {
-        "hastscript": "^6.0.0",
-        "parse-entities": "^2.0.0",
-        "prismjs": "~1.27.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -7243,15 +7035,11 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/space-separated-tokens": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
-      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
     },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
@@ -7954,15 +7742,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/core/trino-web-ui/src/main/resources/webapp-preview/package.json b/core/trino-web-ui/src/main/resources/webapp-preview/package.json
index 30d6781e550..15c9a01ac28 100644
--- a/core/trino-web-ui/src/main/resources/webapp-preview/package.json
+++ b/core/trino-web-ui/src/main/resources/webapp-preview/package.json
@@ -20,6 +20,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.8",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
     "@mui/material-pigment-css": "^7.3.2",
@@ -31,16 +32,15 @@
     "react-calendar-timeline": "^0.30.0-beta.3",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.1",
-    "react-syntax-highlighter": "^15.6.6",
     "sass": "^1.93.2",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@types/lodash": "^4.17.20",
+    "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "@vitejs/plugin-react": "^5.0.3",
diff --git a/core/trino-web-ui/src/main/resources/webapp-preview/src/components/CodeBlock.tsx b/core/trino-web-ui/src/main/resources/webapp-preview/src/components/CodeBlock.tsx
index 8d5ddb76771..5427fdb40c1 100644
--- a/core/trino-web-ui/src/main/resources/webapp-preview/src/components/CodeBlock.tsx
+++ b/core/trino-web-ui/src/main/resources/webapp-preview/src/components/CodeBlock.tsx
@@ -11,31 +11,76 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useState } from 'react'
 import { Box, useMediaQuery } from '@mui/material'
-import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { a11yLight, a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import Editor, { type OnMount } from '@monaco-editor/react'
+import merge from 'lodash.merge'
 import { Theme as ThemeStore, useConfigStore } from '../store'
+import type { editor as MonacoEditor } from 'monaco-editor'
+
+const FALLBACK_LINE_HEIGHT_PX = 20
+const EDITOR_EXTRA_PADDING = 4
+const VIEWPORT_HEIGHT_RATIO = 0.75
+const LINE_BREAK_REGEX = /\r\n|\r|\n/
 
 export interface ICodeBlockProps {
     code: string
     language: string
     height?: string
     noBottomBorder?: boolean
+    monacoOptions?: MonacoEditor.IStandaloneEditorConstructionOptions
 }
 
 export const CodeBlock = (props: ICodeBlockProps) => {
     const config = useConfigStore()
-    const { code, language, height, noBottomBorder } = props
+    const { code, language, height, noBottomBorder, monacoOptions } = props
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+    const [resolvedHeight, setResolvedHeight] = useState<string | undefined>(height)
 
-    const styleToUse = () => {
+    const themeToUse = () => {
         if (config.theme === ThemeStore.Auto) {
-            return prefersDarkMode ? a11yDark : a11yLight
+            return prefersDarkMode ? 'vs-dark' : 'light'
         } else if (config.theme === ThemeStore.Dark) {
-            return a11yDark
+            return 'vs-dark'
         } else {
-            return a11yLight
+            return 'light'
+        }
+    }
+
+    // Calculates a dynamic editor height if none is provided.
+    // Uses the editor's lineHeight and code line count to estimate total height,
+    // adds extra padding, then clamps it so it never exceeds a fraction of the viewport.
+    // Falls back to a fixed height if one was passed in.
+    const handleEditorMount: OnMount = (editor, monaco) => {
+        if (height) {
+            setResolvedHeight(height)
+            return
         }
+
+        const lineHeightOption = editor.getOption(monaco.editor.EditorOption.lineHeight)
+        const lineHeight = typeof lineHeightOption === 'number' ? lineHeightOption : FALLBACK_LINE_HEIGHT_PX
+        const lineCount = Math.max(code.split(LINE_BREAK_REGEX).length, 1)
+        const estimatedHeight = lineCount * lineHeight + EDITOR_EXTRA_PADDING
+        const viewportCap = window.innerHeight * VIEWPORT_HEIGHT_RATIO
+        const clampedHeight = Math.min(estimatedHeight, viewportCap)
+        setResolvedHeight(`${Math.round(clampedHeight)}px`)
+    }
+
+    const defaultMonacoOptions: MonacoEditor.IStandaloneEditorConstructionOptions = {
+        readOnly: true,
+        domReadOnly: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        lineNumbers: 'off',
+        folding: false,
+        contextmenu: false,
+        renderLineHighlight: 'none',
+        overviewRulerLanes: 0,
+        wordWrap: 'on',
+        rulers: [],
+        guides: { indentation: false },
+        stickyScroll: { enabled: false },
+        scrollBeyondLastColumn: 0,
     }
 
     return (
@@ -49,26 +94,17 @@ export const CodeBlock = (props: ICodeBlockProps) => {
                 border: `1px solid ${theme.palette.mode === 'dark' ? '#3f3f3f' : '#ddd'}`,
                 borderBottom: noBottomBorder ? 'none' : '',
                 width: '100%',
-                height: {
-                    xs: '100%',
-                    lg: height,
-                },
+                maxHeight: '90vh',
             })}
         >
-            <SyntaxHighlighter
+            <Editor
+                height={resolvedHeight}
                 language={language}
-                style={styleToUse()}
-                customStyle={{
-                    padding: '4px',
-                    margin: 0,
-                    borderRadius: 0,
-                    height: '100%',
-                    overflow: 'auto',
-                }}
-                wrapLongLines
-            >
-                {code}
-            </SyntaxHighlighter>
+                theme={themeToUse()}
+                onMount={handleEditorMount}
+                value={code}
+                options={merge({}, defaultMonacoOptions, monacoOptions)}
+            />
         </Box>
     )
 }
diff --git a/core/trino-web-ui/src/main/resources/webapp-preview/src/components/QueryJson.tsx b/core/trino-web-ui/src/main/resources/webapp-preview/src/components/QueryJson.tsx
index 6ccf54b26d1..7fc677f0334 100644
--- a/core/trino-web-ui/src/main/resources/webapp-preview/src/components/QueryJson.tsx
+++ b/core/trino-web-ui/src/main/resources/webapp-preview/src/components/QueryJson.tsx
@@ -56,7 +56,17 @@ export const QueryJson = () => {
                 <Grid container spacing={0}>
                     <Grid size={{ xs: 12 }}>
                         <Box sx={{ pt: 2 }}>
-                            <CodeBlock language="json" code={queryJson} />
+                            <CodeBlock
+                                language="json"
+                                code={queryJson}
+                                monacoOptions={{
+                                    lineNumbers: 'on',
+                                    minimap: { enabled: true },
+                                    guides: { indentation: true },
+                                    folding: true,
+                                    stickyScroll: { enabled: true },
+                                }}
+                            />
                         </Box>
                     </Grid>
                 </Grid>