ticket #66 attempt 1

This commit is contained in:
Typosaurus 2026-07-19 20:12:46 +00:00
parent 43c5a948e8
commit b1d4af7ca3
2 changed files with 58 additions and 0 deletions

View File

@ -328,3 +328,44 @@
padding: 0.75rem;
}
}
/* ---- Markdown source/preview toggle ---- */
.gist-markdown-toggle .gist-md-tabbar {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.gist-markdown-toggle .gist-md-tab {
padding: 0.5em 1em;
cursor: pointer;
color: var(--text-muted);
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--radius) var(--radius) 0 0;
background: transparent;
font-size: 0.875rem;
}
.gist-markdown-toggle .gist-md-tab.active {
color: var(--text-primary);
background: var(--bg-card);
border-color: var(--border) var(--border) transparent;
}
.gist-markdown-toggle .tab-pane {
display: none;
}
.gist-markdown-toggle .tab-pane.active {
display: block;
}
.gist-markdown-toggle .gist-markdown-preview {
padding: 1em;
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
min-height: 4em;
background: var(--bg-card);
}

View File

@ -35,6 +35,23 @@
{% if gist['language'] == 'markdown_rendered' %}
<div class="gist-rendered-content rendered-content">{{ render_content(gist['source_code'], author_is_admin=is_admin(author)) }}</div>
{% elif gist['language'] == 'markdown' %}
<div class="gist-code-block gist-markdown-toggle" data-tabs>
<nav class="gist-md-tabbar" role="tablist">
<button type="button" class="gist-md-tab" data-tab="source" role="tab">Source</button>
<button type="button" class="gist-md-tab" data-tab="preview" role="tab">Preview</button>
</nav>
<div data-tab-pane="source" class="tab-pane active" role="tabpanel">
<div class="gist-code-header">
<span class="gist-language-name">{{ language_name(gist['language']) }}</span>
<button type="button" class="gist-copy-btn" data-copy="gist-code-content">Copy</button>
</div>
<pre><code id="gist-code-content" class="language-markdown">{{ gist['source_code'] }}</code></pre>
</div>
<div data-tab-pane="preview" class="tab-pane gist-markdown-preview rendered-content" role="tabpanel">
{{ render_content(gist['source_code'], author_is_admin=is_admin(author)) }}
</div>
</div>
{% else %}
<div class="gist-code-block">
<div class="gist-code-header">