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:
Eric 2024-11-19 18:21:10 -06:00 committed by GitHub
parent 8a8b8403b2
commit 723992acc2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 10 deletions

View file

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

View file

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