mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 00:49:03 +00:00
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.
This commit is contained in:
parent
8a8b8403b2
commit
723992acc2
2 changed files with 29 additions and 10 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue