Merge pull request #5 from agentevals-dev/fix/docs-code-block-readability

fix: make docs code blocks readable in both dark and light themes

Author: sebastianmaniak

hugo.toml

@@ -2,6 +2,10 @@ baseURL = 'https://agentevals.dev/'
 languageCode = 'en-us'
 title = 'AgentEvals - Score Agent Behavior from OpenTelemetry Traces'
 
+[markup]
+  [markup.highlight]
+    noClasses = false
+
 [params]
   description = "Score agent behavior from OpenTelemetry traces without re-running the agent."
   github = "https://github.com/agentevals-dev/agentevals"

static/css/style.css

@@ -932,6 +932,10 @@ section {
   border: 1px solid var(--border);
 }
 
+.docs-article .highlight {
+  margin-bottom: 1.5rem;
+}
+
 .docs-article pre {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -950,6 +954,68 @@ section {
   color: var(--text-primary);
 }
 
+/* Chroma syntax highlighting — dark theme (default) */
+.highlight pre { background: var(--bg-secondary); }
+.highlight .chroma { background: var(--bg-secondary); color: var(--text-primary); }
+.chroma .line { display: flex; }
+.chroma .cl { /* code line */ }
+.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs,
+.chroma .cp, .chroma .cpf { color: #75715e; } /* comments */
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
+.chroma .kr { color: #66d9ef; } /* keywords */
+.chroma .kt { color: #66d9ef; } /* keyword type */
+.chroma .n, .chroma .ni, .chroma .nl, .chroma .nn, .chroma .nx,
+.chroma .py { color: #f8f8f2; } /* names */
+.chroma .na { color: #a6e22e; } /* name attribute */
+.chroma .nb { color: #f8f8f2; } /* name builtin */
+.chroma .nc { color: #a6e22e; } /* name class */
+.chroma .nf, .chroma .fm { color: #a6e22e; } /* name function */
+.chroma .no { color: #66d9ef; } /* name constant */
+.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #f8f8f2; } /* variables */
+.chroma .o, .chroma .ow { color: #f92672; } /* operators */
+.chroma .p { color: #f8f8f2; } /* punctuation */
+.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
+.chroma .s2, .chroma .sh, .chroma .s1, .chroma .ss { color: #e6db74; } /* strings */
+.chroma .se { color: #ae81ff; } /* string escape */
+.chroma .si { color: #e6db74; } /* string interpol */
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
+.chroma .mo, .chroma .il { color: #ae81ff; } /* numbers */
+
+/* Chroma syntax highlighting — light theme */
+[data-theme="light"] .chroma { background: var(--bg-secondary); color: var(--text-primary); }
+[data-theme="light"] .chroma .c, [data-theme="light"] .chroma .ch,
+[data-theme="light"] .chroma .cm, [data-theme="light"] .chroma .c1,
+[data-theme="light"] .chroma .cs, [data-theme="light"] .chroma .cp,
+[data-theme="light"] .chroma .cpf { color: #6a737d; }
+[data-theme="light"] .chroma .k, [data-theme="light"] .chroma .kc,
+[data-theme="light"] .chroma .kd, [data-theme="light"] .chroma .kn,
+[data-theme="light"] .chroma .kp, [data-theme="light"] .chroma .kr { color: #d73a49; }
+[data-theme="light"] .chroma .kt { color: #d73a49; }
+[data-theme="light"] .chroma .n, [data-theme="light"] .chroma .ni,
+[data-theme="light"] .chroma .nl, [data-theme="light"] .chroma .nn,
+[data-theme="light"] .chroma .nx, [data-theme="light"] .chroma .py { color: #24292e; }
+[data-theme="light"] .chroma .na { color: #6f42c1; }
+[data-theme="light"] .chroma .nb { color: #005cc5; }
+[data-theme="light"] .chroma .nc { color: #6f42c1; }
+[data-theme="light"] .chroma .nf, [data-theme="light"] .chroma .fm { color: #6f42c1; }
+[data-theme="light"] .chroma .no { color: #005cc5; }
+[data-theme="light"] .chroma .nv, [data-theme="light"] .chroma .vc,
+[data-theme="light"] .chroma .vg, [data-theme="light"] .chroma .vi,
+[data-theme="light"] .chroma .vm { color: #e36209; }
+[data-theme="light"] .chroma .o, [data-theme="light"] .chroma .ow { color: #d73a49; }
+[data-theme="light"] .chroma .p { color: #24292e; }
+[data-theme="light"] .chroma .s, [data-theme="light"] .chroma .sa,
+[data-theme="light"] .chroma .sb, [data-theme="light"] .chroma .sc,
+[data-theme="light"] .chroma .dl, [data-theme="light"] .chroma .s2,
+[data-theme="light"] .chroma .sh, [data-theme="light"] .chroma .s1,
+[data-theme="light"] .chroma .ss { color: #032f62; }
+[data-theme="light"] .chroma .se { color: #032f62; }
+[data-theme="light"] .chroma .si { color: #032f62; }
+[data-theme="light"] .chroma .m, [data-theme="light"] .chroma .mb,
+[data-theme="light"] .chroma .mf, [data-theme="light"] .chroma .mh,
+[data-theme="light"] .chroma .mi, [data-theme="light"] .chroma .mo,
+[data-theme="light"] .chroma .il { color: #005cc5; }
+
 .docs-article table {
   width: 100%;
   border-collapse: collapse;