Website: Update syntax highlighting on policy, vital, and query pages (…

…#25994) Closes: #25841 Changes: - Updated syntax highlighting in code blocks for XML, SH, and PowerShell commands on the vital details, policy details, and query details pages.
fleetdm · Feb 3, 2025 · f035821 · f035821
1 parent 28d458b
commit f035821
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 35 deletions.
diff --git a/website/assets/js/pages/policy-details.page.js b/website/assets/js/pages/policy-details.page.js
@@ -31,42 +31,43 @@ parasails.registerPage('policy-details', {
     });
     (()=>{
       $('pre code').each((i, block) => {
-        if(block.classList.contains('ps')){
+        if(!block.classList.contains('sql')){
           window.hljs.highlightElement(block);
           return;
-        }
-        let tableNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
-        for(let tableName of tableNamesForThisQuery){// 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(tableName)|| []){
-            tableNamesToHighlight.push(match);
+        } else {
+          let tableNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
+          for(let tableName of tableNamesForThisQuery){// 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(tableName)|| []){
+              tableNamesToHighlight.push(match);
+            }
           }
-        }
-        // Now iterate through the tableNamesToHighlight, replacing all matches in the elements innerHTML.
-        let replacementHMTL = block.innerHTML;
-        for(let keywordInExample of tableNamesToHighlight) {
-          let regexForThisExample = new RegExp(keywordInExample, 'g');
-          replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-attr">'+_.trim(keywordInExample)+'</span>');
-        }
-        $(block).html(replacementHMTL);
-        let columnNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
-        for(let columnName of columnNamesForThisQuery){// 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(columnName)||[]){
-            columnNamesToHighlight.push(match);
+          // Now iterate through the tableNamesToHighlight, replacing all matches in the elements innerHTML.
+          let replacementHMTL = block.innerHTML;
+          for(let keywordInExample of tableNamesToHighlight) {
+            let regexForThisExample = new RegExp(keywordInExample, 'g');
+            replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-attr">'+_.trim(keywordInExample)+'</span>');
+          }
+          $(block).html(replacementHMTL);
+          let columnNamesToHighlight = [];// Empty array to track the keywords that we will need to highlight
+          for(let columnName of columnNamesForThisQuery){// 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(columnName)||[]){
+              columnNamesToHighlight.push(match);
+            }
           }
-        }
 
-        for(let keywordInExample of columnNamesToHighlight) {
-          let regexForThisExample = new RegExp(keywordInExample, 'g');
-          replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-string">'+_.trim(keywordInExample)+'</span>');
-        }
-        $(block).html(replacementHMTL);
-        window.hljs.highlightElement(block);
-        // After we've highlighted our keywords, we'll highlight the rest of the codeblock
-        // If this example is a single-line, we'll do some basic formatting to make it more human-readable.
-        if($(block)[0].innerText.match(/\n/gmi)){
-          $(block).addClass('has-linebreaks');
-        } else {
-          $(block).addClass('no-linebreaks');
+          for(let keywordInExample of columnNamesToHighlight) {
+            let regexForThisExample = new RegExp(keywordInExample, 'g');
+            replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-string">'+_.trim(keywordInExample)+'</span>');
+          }
+          $(block).html(replacementHMTL);
+          window.hljs.highlightElement(block);
+          // After we've highlighted our keywords, we'll highlight the rest of the codeblock
+          // If this example is a single-line, we'll do some basic formatting to make it more human-readable.
+          if($(block)[0].innerText.match(/\n/gmi)){
+            $(block).addClass('has-linebreaks');
+          } else {
+            $(block).addClass('no-linebreaks');
+          }
         }
       });
     })();

diff --git a/website/assets/styles/pages/policy-details.less b/website/assets/styles/pages/policy-details.less
@@ -1,3 +1,4 @@
+// lesshint-disable spaceAroundComma
 #policy-details {
 
   h3 {
@@ -364,10 +365,39 @@
       background-color: rgba(25, 33, 71, 0.1);
     }
   }
-  @import '../pages/docs/code-blocks.less'; // styles for code blocks and hljs
   [purpose='codeblock'] {
     padding: 0;
     position: relative;
+    .sh, .xml, .ps {
+      .hljs-keyword,
+      .hljs-selector-tag,
+      .hljs-name {
+        color: #AE6DDF;
+      }
+
+      .hljs-symbol,
+      .hljs-attribute,
+      .hljs-function-keyword,
+      .hljs-attr,
+      .hljs-class,
+      .hljs-title,
+      .hljs-string,
+      .hljs-type,
+      .hljs-builtin-name,
+      .hljs-selector-id,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo,
+      .hljs-addition,
+      .hljs-variable,
+      .hljs-template-variable {
+        color: #4fd061;
+      }
+      .hljs-comment,
+      .hljs-deletion,
+      .hljs-meta {
+        color: @core-fleet-black-50;
+      }
+    }
     [purpose='copy-button'] {
       position: absolute;
       top: 11px;
@@ -418,7 +448,8 @@
       [purpose='line-break']:not(:first-of-type)::before {
         content: '\a';
       }
-      &:not(.nohighlight) {
+
+      &.sql {
         .hljs-keyword { // SQL keywords (SELECT, FROM, WHERE, IN, etc.)
           color: #AE6DDF;
         }

diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
@@ -1,3 +1,4 @@
+// lesshint-disable spaceAroundComma
 #query-detail {
 
   h3 {
@@ -338,6 +339,7 @@
           background-position: center;
         }
       }
+
     }
 
     pre {
@@ -349,6 +351,36 @@
       border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
       background: #F9FAFC;
       border-radius: 0px 0px 4px 4px;
+      .ps {
+        .hljs-keyword,
+        .hljs-selector-tag,
+        .hljs-name {
+          color: #AE6DDF;
+        }
+
+        .hljs-symbol,
+        .hljs-attribute,
+        .hljs-function-keyword,
+        .hljs-attr,
+        .hljs-class,
+        .hljs-title,
+        .hljs-string,
+        .hljs-type,
+        .hljs-builtin-name,
+        .hljs-selector-id,
+        .hljs-selector-attr,
+        .hljs-selector-pseudo,
+        .hljs-addition,
+        .hljs-variable,
+        .hljs-template-variable {
+          color: #4fd061;
+        }
+        .hljs-comment,
+        .hljs-deletion,
+        .hljs-meta {
+          color: @core-fleet-black-50;
+        }
+      }
       code {
         color: #515774;
         &.has-linebreaks {

diff --git a/website/assets/styles/pages/vital-details.less b/website/assets/styles/pages/vital-details.less
@@ -1,3 +1,4 @@
+// lesshint-disable spaceAroundComma
 #vital-details {
   h3 {
     padding-bottom: 24px;
@@ -399,6 +400,36 @@
       border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
       background: #F9FAFC;
       border-radius: 0px 0px 4px 4px;
+      .ps {
+        .hljs-keyword,
+        .hljs-selector-tag,
+        .hljs-name {
+          color: #AE6DDF;
+        }
+
+        .hljs-symbol,
+        .hljs-attribute,
+        .hljs-function-keyword,
+        .hljs-attr,
+        .hljs-class,
+        .hljs-title,
+        .hljs-string,
+        .hljs-type,
+        .hljs-builtin-name,
+        .hljs-selector-id,
+        .hljs-selector-attr,
+        .hljs-selector-pseudo,
+        .hljs-addition,
+        .hljs-variable,
+        .hljs-template-variable {
+          color: #4fd061;
+        }
+        .hljs-comment,
+        .hljs-deletion,
+        .hljs-meta {
+          color: @core-fleet-black-50;
+        }
+      }
       code {
         color: #515774;
         &.has-linebreaks {

diff --git a/website/views/pages/policy-details.ejs b/website/views/pages/policy-details.ejs
@@ -25,15 +25,15 @@
               <p>Create or edit a configuration profile with the following information:</p>
               <div  purpose="codeblock">
                 <div purpose="copy-button"></div>
-                <pre><code class="nohighlight"><%= policy.configuration_profile %></code></pre>
+                <pre><code class="hljs xml"><%= policy.configuration_profile %></code></pre>
               </div>
             </div>
 
             <div v-if="policy.script">
               <p>Create or edit the following script and configure it to run when the check fails:</p>
               <div  purpose="codeblock">
                 <div purpose="copy-button"></div>
-                <pre><code class="nohighlight"><%= policy.script %></code></pre>
+                <pre><code class="hljs sh"><%= policy.script %></code></pre>
               </div>
             </div>
           </div>