Fix syntax highlighting in file view
arborium has no setConfig method; theme passes via highlightAll({ theme }),
and manual mode uses data-manual on the script tag. .code-body *
suppresses any background arborium injects on descendants.
Assisted-by: Claude Sonnet 4.6 via Claude Code
diff --git a/quire-server/static/style.css b/quire-server/static/style.css
index dde3654..a015891 100644
--- a/quire-server/static/style.css
+++ b/quire-server/static/style.css
@@ -812,6 +812,8 @@ html.dark {
font-family: inherit;
font-size: inherit;
line-height: inherit;
+ background: var(--code) !important;
+ border-radius: 0 !important;
}
.code-body > code[data-lang] {
@@ -820,17 +822,23 @@ html.dark {
/* ── Arborium syntax highlighting integration ──────────────────── */
-/* Keep quire's paper-toned code background; strip any theme-imposed radius. */
-pre:has(code[class*="language-"]),
-pre:has(code[data-lang]) {
+/* Strip any background arborium injects on the code element or any wrapper it adds. */
+.code-body,
+.code-body * {
+ background: transparent !important;
+}
+
+/* Restore the code surface background on the pre itself. */
+.code-body {
background: var(--code) !important;
- border-radius: 0 !important;
}
/* Left-rail accent only for standalone code blocks, not the file view grid. */
:not(.code-body):has(code[class*="language-"]),
:not(.code-body):has(code[data-lang]) {
border-left: 2px solid var(--accent) !important;
+ background: var(--code) !important;
+ border-radius: 0 !important;
}
/* Arborium injects its own <style> for theme colors; let it control text
@@ -839,7 +847,6 @@ pre code[class*="language-"],
pre code[data-lang] {
font-family: var(--font-mono) !important;
font-size: 13px !important;
- background: transparent !important;
}
/* ── Tree browser ──────────────────────────────────────────────── */
diff --git a/quire-server/templates/_base.html b/quire-server/templates/_base.html
index 5f2fd9d..1a7479a 100644
--- a/quire-server/templates/_base.html
+++ b/quire-server/templates/_base.html
@@ -5,8 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}quire{% endblock %}</title>
<link rel="stylesheet" href="/style.css">
- <script>window.Arborium = { manual: true };</script>
- <script defer src="https://cdn.jsdelivr.net/npm/@arborium/arborium@2/dist/arborium.iife.js"></script>
+ <script defer data-manual src="https://cdn.jsdelivr.net/npm/@arborium/arborium@2/dist/arborium.iife.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
</head>
<body>
@@ -40,8 +39,7 @@
const arborium = window.arborium;
if (!arborium) return;
const theme = this.darkMode ? 'github-dark' : 'github-light';
- arborium.setConfig({ theme });
- arborium.highlightAll();
+ arborium.highlightAll({ theme });
}
}
}