Add syntax highlighting and word wrap to file view
Wire up Arborium by wrapping file content in <code data-lang="..."> so
arborium.highlightAll() picks it up. Enable word wrap unconditionally on
the code body.
diff --git a/quire-server/static/style.css b/quire-server/static/style.css
index 34a106d..dde3654 100644
--- a/quire-server/static/style.css
+++ b/quire-server/static/style.css
@@ -803,52 +803,17 @@ html.dark {
white-space: pre;
}
-.code-toolbar {
- display: flex;
- justify-content: flex-end;
- padding: 5px 10px;
- border-bottom: 1px solid var(--rule2);
- background: var(--code);
-}
-
-.code-toolbar-btn {
- font-family: var(--font-mono);
- font-size: 11px;
- padding: 2px 8px;
- background: transparent;
- border: 1px solid var(--rule2);
- color: var(--mutedFaint);
- cursor: pointer;
- border-radius: 3px;
- letter-spacing: 0.5px;
- line-height: 1.6;
-}
-
-.code-toolbar-btn:hover {
- color: var(--muted);
- border-color: var(--muted);
-}
-
-.code-toolbar-btn.is-active {
- color: var(--accent);
- border-color: var(--accent);
-}
-
.code-body {
padding: 18px 56px 18px 20px;
overflow: auto;
margin: 0;
- white-space: pre;
+ white-space: pre-wrap;
+ word-break: break-all;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
-.code-body--wrap {
- white-space: pre-wrap !important;
- word-break: break-all;
-}
-
.code-body > code[data-lang] {
display: block;
}
diff --git a/quire-server/templates/file.html b/quire-server/templates/file.html
index 2bd19fd..976f349 100644
--- a/quire-server/templates/file.html
+++ b/quire-server/templates/file.html
@@ -23,17 +23,14 @@
<div class="tree-body">
{# LEFT — code surface, full width within the column #}
- <div class="file-code-col" x-data="{ wordWrap: false }">
- <div class="code-toolbar">
- <button class="code-toolbar-btn" :class="{ 'is-active': wordWrap }" @click="wordWrap = !wordWrap">wrap</button>
- </div>
+ <div class="file-code-col">
<div class="code-surface">
<div class="code-gutter">
{% for line_num in line_nums %}
<div class="code-line-num">{{ line_num }}</div>
{% endfor %}
</div>
- <pre class="code-body" :class="{ 'code-body--wrap': wordWrap }"><code data-lang="{{ language }}">{% for line in lines %}{{ line|safe }}{% endfor %}</code></pre>
+ <pre class="code-body"><code data-lang="{{ language }}">{% for line in lines %}{{ line|safe }}{% endfor %}</code></pre>
</div>
</div>