102 lines
3.1 KiB
HTML
102 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block content_title %}{{ title }}{% endblock %}
|
|
{% block content_description %}{{ description }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<div class="card">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-sm btn-outline-secondary" id="showRaw">Show Raw</button>
|
|
<button class="btn btn-sm btn-outline-primary active" id="showRendered">Show Rendered</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Raw markdown view (hidden by default) -->
|
|
<div id="rawMarkdown" class="code-wrapper" style="display: none;">
|
|
<pre><code class="language-markdown">{{ markdown_content }}</code></pre>
|
|
</div>
|
|
|
|
<!-- Rendered markdown view -->
|
|
<div id="renderedMarkdown" class="markdown-body">
|
|
{{ markdown_content | markdown }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{ super() }}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
|
|
<style>
|
|
pre, code {
|
|
margin: 0;
|
|
padding: 0;
|
|
white-space: pre-wrap !important;
|
|
word-wrap: break-word !important;
|
|
max-width: 100%;
|
|
}
|
|
|
|
pre code {
|
|
padding: 1rem !important;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
.code-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.markdown-body {
|
|
padding: 1rem;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Dark mode styling (optional) */
|
|
@media (prefers-color-scheme: dark) {
|
|
.markdown-body {
|
|
color: #c9d1d9;
|
|
background-color: #0d1117;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize syntax highlighting
|
|
document.querySelectorAll('pre code').forEach((block) => {
|
|
hljs.highlightElement(block);
|
|
});
|
|
|
|
// Toggle buttons for display
|
|
const showRawBtn = document.getElementById('showRaw');
|
|
const showRenderedBtn = document.getElementById('showRendered');
|
|
const rawMarkdown = document.getElementById('rawMarkdown');
|
|
const renderedMarkdown = document.getElementById('renderedMarkdown');
|
|
|
|
showRawBtn.addEventListener('click', function() {
|
|
rawMarkdown.style.display = 'block';
|
|
renderedMarkdown.style.display = 'none';
|
|
showRawBtn.classList.add('active');
|
|
showRenderedBtn.classList.remove('active');
|
|
});
|
|
|
|
showRenderedBtn.addEventListener('click', function() {
|
|
rawMarkdown.style.display = 'none';
|
|
renderedMarkdown.style.display = 'block';
|
|
showRawBtn.classList.remove('active');
|
|
showRenderedBtn.classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |