From 414c2f42b3e9413a207f95ae5d873de2bd111d19 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 19 Sep 2023 04:40:20 -0500
Subject: [PATCH] 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  |  3 +++
 website/assets/styles/pages/query-detail.less | 27 +++++++++++++++++++
 website/views/pages/query-detail.ejs          |  2 +-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/website/assets/js/pages/query-detail.page.js b/website/assets/js/pages/query-detail.page.js
index 378ad79c60..f05e8e97eb 100644
--- a/website/assets/js/pages/query-detail.page.js
+++ b/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);
+    });
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
index f0039bb782..d419fe8c9f 100644
--- a/website/assets/styles/pages/query-detail.less
+++ b/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;
   }
diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs
index e67a4b30f2..7029da4643 100644
--- a/website/views/pages/query-detail.ejs
+++ b/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>