Website: add syntax highlighting to query details pages (#13955)

Closes: #13378

Changes:
- Added syntax highlighting to query details pages.
- Updated code block styles on query details pages.

website/assets/js/pages/query-detail.page.js

@@ -13,6 +13,9 @@ parasails.registerPage('query-detail', {
     //…
   },
   mounted: async function () {
+    $('pre code').each((i, block) => {
+      window.hljs.highlightElement(block);
+    });
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

website/assets/styles/pages/query-detail.less

@@ -22,6 +22,33 @@
     color: @core-vibrant-blue;
   }
 
+  pre {
+    width: 100%;
+    max-width: 100%;
+    padding: 30px;
+    background: #F9FAFC;
+    border: 1px solid @core-vibrant-blue-15;
+    border-radius: 4px;
+    margin-bottom: 0px;
+    code {
+      .hljs-keyword { // SQL keywords (SELECT, FROM, WHERE, IN, etc.)
+        color: #AE6DDF;
+        white-space: pre;
+      }
+      .hljs-string { // For words wrapped in quotation marks
+        color: #3DB67B;
+        white-space: pre;
+      }
+      background-color: @ui-off-white;
+      border: none;
+      word-break: break-word;
+      white-space: normal;
+      padding: 0;
+      font-size: 13px;
+      line-height: 24px;
+    }
+  }
+
   .border-top {
     border-color: #E2E4EA;
   }

website/views/pages/query-detail.ejs

@@ -20,7 +20,7 @@
         <div purpose="body" class="pt-4 pt-md-3 mt-3 mt-md-0">
           <div purpose="query">
             <h3 class="pb-4 mb-3 m-0">Query</h3>
-            <code class="pb-3">{{query.query ? query.query : '--'}}</code>
+            <pre ><code class="sql hljs">{{query.query ? query.query : '--'}}</code></pre>
           </div>
           <div purpose="resolution" v-if="query.kind === 'policy' && query.resolution">
             <h3 class="pt-5 pb-3">Resolve</h3>