Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 00:49:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 106

Website: Update syntax highlighting on policy, vital, and query pages (#25994)

Browse source 
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.
This commit is contained in:
Eric 2025-02-03 16:14:03 -06:00 committed by GitHub
parent 28d458b948
commit f035821914
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 132 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
website/assets/js/pages/policy-details.page.js vendored
View file

@ -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);
}
}
// 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');
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);
}
}
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');
}
}
});
})();

35
website/assets/styles/pages/policy-details.less vendored
View file

@ -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;
}

32
website/assets/styles/pages/query-detail.less vendored
View file

@ -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 {

31
website/assets/styles/pages/vital-details.less vendored
View file

@ -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 {

4
website/views/pages/policy-details.ejs vendored
View file

@ -25,7 +25,7 @@
<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>
@ -33,7 +33,7 @@
<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>