Fix query editor syntax-highlighting colors and visual bugs

[noahtalerman]

For the following quick win:

• Fix query editor syntax-highlighting colors and visual bugs #49373

Summary by CodeRabbit

• Style
  • Refined syntax highlighting across documentation code examples for improved consistency.
  • Column names now use dedicated styling, making them easier to distinguish from strings.
  • Updated colors for keywords, operators, numbers, and other code elements across documentation and query generator views.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: cc6b2ffc-c503-44ce-9712-e41637f2b77a

📥 Commits

Reviewing files that changed from the base of the PR and between 5f95d68 and c3752de.

📒 Files selected for processing (13)

• website/assets/js/pages/docs/app-details.page.js
• website/assets/js/pages/docs/osquery-table-details.page.js
• website/assets/js/pages/docs/policy-details.page.js
• website/assets/js/pages/docs/report-details.page.js
• website/assets/js/pages/docs/vital-details.page.js
• website/assets/styles/pages/admin/query-generator.less
• website/assets/styles/pages/docs/app-details.less
• website/assets/styles/pages/docs/command-details.less
• website/assets/styles/pages/docs/osquery-table-details.less
• website/assets/styles/pages/docs/policy-details.less
• website/assets/styles/pages/docs/report-details.less
• website/assets/styles/pages/docs/script-details.less
• website/assets/styles/pages/docs/vital-details.less

---

Walkthrough

Updated documentation syntax highlighting so matched column names use the hljs-attr-column class instead of hljs-string. Revised LESS rules across documentation pages and the query generator to adjust keyword, number, operator, string, and column-token colors, including explicit styling for column attributes.

Possibly related issues

• Fix query editor syntax-highlighting colors and visual bugs #49373: The PR implements the referenced syntax-highlighting color and column-highlighting updates.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description only links an issue and omits the required template sections, checklist items, and testing details.	Fill in the template sections: related issue, applicable checklist items, testing, and any migration/GitOps/fleetd notes that apply.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main theme of syntax-highlighting and visual styling fixes, though it is a bit broader than the docs/query-generator changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch website-query-styles

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}