🎨 Enhance syntax highlighting styles with !important for consistent appearance

This commit is contained in:
2026-01-29 04:54:35 +00:00
parent 7a1fb11dfb
commit 4952bc7649

View File

@@ -615,11 +615,11 @@ onMounted(async () => {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
cursor: pointer; cursor: pointer;
min-height: 20px; min-height: 20px;
background: #ffffff; background: #ffffff !important;
} }
.content-viewer.dark-mode .line { .content-viewer.dark-mode .line {
background: #1e1e1e; background: #1e1e1e !important;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -629,28 +629,28 @@ onMounted(async () => {
} }
.line:hover { .line:hover {
background: rgba(102, 126, 234, 0.08); background: rgba(102, 126, 234, 0.08) !important;
} }
.content-viewer.dark-mode .line:hover { .content-viewer.dark-mode .line:hover {
background: rgba(102, 126, 234, 0.15); background: rgba(102, 126, 234, 0.15) !important;
} }
.line.selected { .line.selected {
background: rgba(102, 126, 234, 0.15); background: rgba(102, 126, 234, 0.15) !important;
} }
.content-viewer.dark-mode .line.selected { .content-viewer.dark-mode .line.selected {
background: rgba(102, 126, 234, 0.25); background: rgba(102, 126, 234, 0.25) !important;
} }
.line.highlight-match { .line.highlight-match {
background: rgba(255, 235, 59, 0.3); background: rgba(255, 235, 59, 0.3) !important;
border-left: 3px solid #ffc107; border-left: 3px solid #ffc107;
} }
.content-viewer.dark-mode .line.highlight-match { .content-viewer.dark-mode .line.highlight-match {
background: rgba(255, 235, 59, 0.15); background: rgba(255, 235, 59, 0.15) !important;
} }
.line.current-result { .line.current-result {
@@ -670,6 +670,7 @@ onMounted(async () => {
font-family: monospace; font-family: monospace;
margin-right: 1rem; margin-right: 1rem;
user-select: none; user-select: none;
flex-shrink: 0;
} }
.content-viewer.dark-mode .line-number { .content-viewer.dark-mode .line-number {
@@ -681,78 +682,79 @@ onMounted(async () => {
flex: 1; flex: 1;
white-space: pre; white-space: pre;
overflow-x: auto; overflow-x: auto;
background: transparent; background: transparent !important;
color: inherit; color: inherit;
} }
.line pre code { .line pre code {
background: transparent; background: transparent !important;
color: inherit; color: inherit !important;
padding: 0 !important;
} }
/* Light mode syntax highlighting - high contrast colors */ /* Light mode syntax highlighting - high contrast colors */
.content-viewer:not(.dark-mode) .line pre code { .content-viewer:not(.dark-mode) .line pre code {
background-color: transparent; background-color: transparent !important;
color: #24292e; color: #24292e !important;
} }
.content-viewer:not(.dark-mode) .hljs { .content-viewer:not(.dark-mode) .hljs {
background: #ffffff; background: transparent !important;
color: #24292e; color: #24292e !important;
} }
.content-viewer:not(.dark-mode) .hljs-attr, .content-viewer:not(.dark-mode) .hljs-attr,
.content-viewer:not(.dark-mode) .hljs-attribute { .content-viewer:not(.dark-mode) .hljs-attribute {
color: #6f42c1; color: #6f42c1 !important;
font-weight: 600; font-weight: 600;
} }
.content-viewer:not(.dark-mode) .hljs-string { .content-viewer:not(.dark-mode) .hljs-string {
color: #032f62; color: #032f62 !important;
font-weight: 500; font-weight: 500;
} }
.content-viewer:not(.dark-mode) .hljs-number { .content-viewer:not(.dark-mode) .hljs-number {
color: #005a9c; color: #005a9c !important;
font-weight: 600; font-weight: 600;
} }
.content-viewer:not(.dark-mode) .hljs-literal { .content-viewer:not(.dark-mode) .hljs-literal {
color: #d73a49; color: #d73a49 !important;
font-weight: 600; font-weight: 600;
} }
.content-viewer:not(.dark-mode) .hljs-name { .content-viewer:not(.dark-mode) .hljs-name {
color: #24292e; color: #24292e !important;
font-weight: 600; font-weight: 600;
} }
/* Dark mode syntax highlighting */ /* Dark mode syntax highlighting */
.content-viewer.dark-mode .line pre code { .content-viewer.dark-mode .line pre code {
background-color: transparent; background-color: transparent !important;
color: #e1e4e8; color: #e1e4e8 !important;
} }
.content-viewer.dark-mode .hljs { .content-viewer.dark-mode .hljs {
background: #1e1e1e; background: transparent !important;
color: #e1e4e8; color: #e1e4e8 !important;
} }
.content-viewer.dark-mode .hljs-attr, .content-viewer.dark-mode .hljs-attr,
.content-viewer.dark-mode .hljs-attribute { .content-viewer.dark-mode .hljs-attribute {
color: #79b8ff; color: #79b8ff !important;
} }
.content-viewer.dark-mode .hljs-string { .content-viewer.dark-mode .hljs-string {
color: #85e89d; color: #85e89d !important;
} }
.content-viewer.dark-mode .hljs-number { .content-viewer.dark-mode .hljs-number {
color: #79b8ff; color: #79b8ff !important;
} }
.content-viewer.dark-mode .hljs-literal { .content-viewer.dark-mode .hljs-literal {
color: #f97583; color: #f97583 !important;
} }
.line-wrap .line pre { .line-wrap .line pre {