From 723992acc2e1f17d3e76d16a85dfb9d9aa5c787f Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 19 Nov 2024 18:21:10 -0600
Subject: [PATCH] Update syntax highlighting on /tables pages. (#23935)

Closes: #23664

Changes:
- Updated the syntax highlighting on /tables/* pages to not highlight
column names the same as table names.
---
 .../js/pages/osquery-table-details.page.js    | 24 ++++++++++++++-----
 .../styles/pages/osquery-table-details.less   | 15 ++++++++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/website/assets/js/pages/osquery-table-details.page.js b/website/assets/js/pages/osquery-table-details.page.js
index 4897b68ccc..d940b76af9 100644
--- a/website/assets/js/pages/osquery-table-details.page.js
+++ b/website/assets/js/pages/osquery-table-details.page.js
@@ -73,20 +73,32 @@ parasails.registerPage('osquery-table-details', {
     keywordsForThisTable = keywordsForThisTable.sort((a,b)=>{// Sorting the array of keywords by length to match larger keywords first.
       return a.length < b.length ? 1 : -1;
     });
+    keywordsForThisTable = _.pull(keywordsForThisTable, this.tableToDisplay.title);
     (()=>{
       $('pre code').each((i, block) => {
-        let keywordsToHighlight = [];// Empty array to track the keywords that we will need to highlight
-        for(let keyword of keywordsForThisTable){// Going through the array of keywords for this table, if the entire word matches, we'll add it to the
-          for(let match of block.innerHTML.match(keyword)||[]){
-            keywordsToHighlight.push(match);
-          }
+        let tableNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
+        for(let match of block.innerHTML.match(this.tableToDisplay.title)||[]){
+          tableNamesToHighlight.push(match);
         }
         // Now iterate through the keywordsToHighlight, replacing all matches in the elements innerHTML.
         let replacementHMTL = block.innerHTML;
-        for(let keywordInExample of keywordsToHighlight) {
+        for(let keywordInExample of tableNamesToHighlight) {
           let regexForThisExample = new RegExp(keywordInExample, 'g');
           replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-attr">'+keywordInExample+'</span>');
         }
+        // $(block).html(replacementHMTL);
+        let columnNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
+        for(let keyword of keywordsForThisTable){// Going through the array of keywords for this table, if the entire word matches, we'll add it to the
+          for(let match of block.innerHTML.match(keyword)||[]){
+            columnNamesToHighlight.push(match);
+          }
+        }
+        // Now iterate through the keywordsToHighlight, replacing all matches in the elements innerHTML.
+        // let replacementHMTL = block.innerHTML;
+        for(let keywordInExample of columnNamesToHighlight) {
+          let regexForThisExample = new RegExp(keywordInExample, 'g');
+          replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-string">'+keywordInExample+'</span>');
+        }
         $(block).html(replacementHMTL);
         // After we've highlighted our keywords, we'll highlight the rest of the codeblock
         window.hljs.highlightElement(block);
diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less
index b452731b13..e7b42e2f31 100644
--- a/website/assets/styles/pages/osquery-table-details.less
+++ b/website/assets/styles/pages/osquery-table-details.less
@@ -278,19 +278,26 @@
           .hljs-keyword {
             color: #FFF;
           }
+          .hljs-string { // For words wrapped in quotation marks
+            color: #FFF;
+          }
           color: #FFF;
           background-color: #AE6DDF;
-          border-radius: 4px;
-          padding: 4px 4px 4px 4px;
+          border-radius: 3px;
           white-space: pre;
           vertical-align: baseline;
-          line-height: 16px;
           span {
             padding: 0;
           }
         }
+        .hljs-number {
+          color: #f5871f;
+        }
         .hljs-string { // For words wrapped in quotation marks
-          color: #3DB67B;
+          color: #4fd061;
+          .hljs-keyword {
+            color: #4fd061;
+          }
         }
         background-color: @ui-off-white;
         border: none;