115 lines
3.8 KiB
HTML
115 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Document Version Markdown{% endblock %}
|
|
|
|
{% block content_title %}Document Version Markdown{% endblock %}
|
|
{% block content_description %}Markdown inhoud van document versie {{ document_version.id }}.{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<div class="card">
|
|
<div class="card-header bg-light">
|
|
<h5>Document Informatie</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Document ID:</strong> {{ document_version.doc_id }}</p>
|
|
<p><strong>Versie ID:</strong> {{ document_version.id }}</p>
|
|
<p><strong>Object Naam:</strong> {{ document_version.object_name }}</p>
|
|
<p><strong>Taal:</strong> {{ document_version.language }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-4">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<h5>Markdown Content</h5>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-sm btn-outline-secondary" id="showRaw">Toon ruw</button>
|
|
<button class="btn btn-sm btn-outline-primary active" id="showRendered">Toon gerenderd</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Ruwe markdown weergave (standaard verborgen) -->
|
|
<div id="rawMarkdown" class="code-wrapper" style="display: none;">
|
|
<pre><code class="language-markdown">{{ markdown_content }}</code></pre>
|
|
</div>
|
|
|
|
<!-- Gerenderde markdown weergave -->
|
|
<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;
|
|
}
|
|
|
|
/* Zorg ervoor dat de markdown goed uitziet in de donkere modus van de app (optioneel) */
|
|
@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);
|
|
});
|
|
|
|
// Schakelknoppen voor weergave
|
|
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 %} |