feat(highlight): integrate Highlight.js for syntax highlighting in JSON and SQL views

src/app.css

@@ -2,6 +2,73 @@
 @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
 @import 'tailwindcss';
 
+/* Highlight.js: atom-one-light for light mode */
+@import 'highlight.js/styles/atom-one-light.css';
+
+/* Highlight.js: atom-one-dark for dark mode */
+.dark .hljs {
+	color: #abb2bf;
+}
+.dark .hljs-comment,
+.dark .hljs-quote {
+	color: #5c6370;
+	font-style: italic;
+}
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-formula {
+	color: #c678dd;
+}
+.dark .hljs-section,
+.dark .hljs-name,
+.dark .hljs-selector-tag,
+.dark .hljs-deletion,
+.dark .hljs-subst {
+	color: #e06c75;
+}
+.dark .hljs-literal {
+	color: #56b6c2;
+}
+.dark .hljs-string,
+.dark .hljs-regexp,
+.dark .hljs-addition,
+.dark .hljs-attribute,
+.dark .hljs-meta .hljs-string {
+	color: #98c379;
+}
+.dark .hljs-attr,
+.dark .hljs-variable,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-selector-class,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-pseudo,
+.dark .hljs-number {
+	color: #d19a66;
+}
+.dark .hljs-symbol,
+.dark .hljs-bullet,
+.dark .hljs-link,
+.dark .hljs-meta,
+.dark .hljs-selector-id,
+.dark .hljs-title {
+	color: #61aeee;
+}
+.dark .hljs-built_in,
+.dark .hljs-title.class_,
+.dark .hljs-class .hljs-title {
+	color: #e6c07b;
+}
+.dark .hljs-emphasis {
+	font-style: italic;
+}
+.dark .hljs-strong {
+	font-weight: bold;
+}
+.dark .hljs-link {
+	text-decoration: underline;
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {