Hugging Face's logo

Spaces:
aradhyapavan
/
markdown-editor
Running

App Files Community
markdown-editor / templates /index.html
aradhyapavan's picture
aradhyapavan
Readme Editor
b58f685 verified
raw
history blame contribute delete
18.8 kB
 {% set title = 'Rich Markdown Editor' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }}</title>
<meta name="author" content="Aradhya Pavan H S" />
<link rel="author" href="https://github.com/aradhyapavan" />
<meta name="application-name" content="Rich Markdown Editor" />
<meta name="generator" content="Designgen developed by Aradhya Pavan" />
<meta name="description" content="Free Markdown editor and online Markdown previewer. Convert Markdown to HTML and export to PDF. Developed by Aradhya Pavan." />
<meta name="keywords" content="Free Markdown editor, Online Markdown Previewer, Markdown to HTML, Markdown to PDF, Markdown editor online, Markdown converter, Markdown viewer, HTML export, PDF export, EasyMDE, KaTeX, Mermaid, GitHub-style Markdown, Designgen, Aradhya Pavan H S, Aradhya Pavan" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://github.com/aradhyapavan" />
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="Free Markdown editor and online Markdown previewer. Convert Markdown to HTML and export to PDF. Developed by Aradhya Pavan." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/aradhyapavan" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ title }}" />
<meta name="twitter:description" content="Free Markdown editor and online Markdown previewer. Convert Markdown to HTML and export to PDF. Developed by Aradhya Pavan." />
<meta name="theme-color" content="#0f172a" />
<link rel="icon" href="{{ url_for('static', filename='favicon/favicon.ico') }}" type="image/x-icon" />
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon/favicon.ico') }}" type="image/x-icon" />
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon/favicon.svg') }}" />
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/android-chrome-512x512.png') }}" />
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/android-chrome-512x512.png') }}" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon/android-chrome-512x512.png') }}" />
<link rel="manifest" href="{{ url_for('static', filename='favicon/site.webmanifest') }}" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@primer/css@21.0.7/dist/primer.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light app-header px-3">
<span class="navbar-brand fw-bold d-flex align-items-center"><i class="fa-solid fa-file-lines me-2"></i>Markdown Editor</span>
<div class="collapse navbar-collapse show">
<div class="ms-3 me-3 d-flex align-items-center gap-2">
<span class="text-muted small">File name</span>
<span id="doc-title-pill" class="doc-title-pill" contenteditable="true" spellcheck="false" title="Click to rename" aria-label="File name">Welcome file</span>
</div>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-import-md"><i class="fa-solid fa-upload"></i> Import Markdown</button></li>
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-import-html"><i class="fa-solid fa-file-import"></i> Import HTML</button></li>
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-samples"><i class="fa-solid fa-wand-magic-sparkles"></i> Samples</button></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="exportDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-download"></i> Export</a>
<ul class="dropdown-menu" aria-labelledby="exportDropdown">
<li><button class="dropdown-item" id="btn-export-md"><i class="fa-solid fa-file-lines"></i> Markdown</button></li>
<li><button class="dropdown-item" id="btn-export-html"><i class="fa-solid fa-code"></i> HTML (raw)</button></li>
<li><button class="dropdown-item" id="btn-export-html-styled"><i class="fa-solid fa-paintbrush"></i> HTML (with styles)</button></li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" id="btn-export-pdf"><i class="fa-solid fa-file-pdf"></i> PDF</button></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-readmode"><i class="fa-solid fa-book-open"></i> Read mode</button></li>
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-theme"><i class="fa-solid fa-moon"></i> Theme</button></li>
<li class="nav-item"><button class="btn btn-link nav-link" id="btn-about"><i class="fa-solid fa-user"></i> About</button></li>
</ul>
</div>
</nav>
<div class="container-fluid p-3 app-shell">
<div class="row g-3">
<div id="leftPane" class="col-md-6 d-flex flex-column pane card-pane">
<div class="pane-header d-flex align-items-center justify-content-between"><span class="fw-semibold"><i class="fa-solid fa-pen"></i> Editor</span><span class="text-muted small" id="status-line">Ready</span></div>
<textarea id="editor"></textarea>
</div>
<div id="rightPane" class="col-md-6 d-flex flex-column pane card-pane">
<div class="pane-header d-flex align-items-center justify-content-between">
<span class="fw-semibold"><i class="fa-solid fa-eye"></i> Preview</span>
</div>
<div id="preview" class="p-4 flex-grow-1 overflow-auto"></div>
</div>
</div>
</div>
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutLabel"><i class="fa-solid fa-user-astronaut me-2"></i>About the Developer</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column gap-2">
<p class="mb-0">Hi, I'm <strong>Aradhya Pavan H S</strong> — a passionate techie who loves building useful tools and contributing to open source. I got fed up with online Markdown tools and their limitations, so I built this clean, fast editor with a great preview and rich exports (Markdown, HTML, styled HTML, PDF). I built it for myself—feel free to clone it and use it.</p>
<div class="row g-3 mt-1">
<div class="col-md-6">
<div class="card bg-body-secondary border-0">
<div class="card-body py-3">
<div class="fw-semibold mb-1"><i class="fa-solid fa-bolt me-2"></i>What I do</div>
<ul class="mb-0 small">
<li>UI engineering and component libraries</li>
<li>APIs, automation, and tooling</li>
<li>Docs, DX, and product polish</li>
<li>Contributing to open source and community tooling</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-body-secondary border-0">
<div class="card-body py-3">
<div class="fw-semibold mb-1"><i class="fa-solid fa-link me-2"></i>Links</div>
<ul class="mb-0 small">
<li><a href="https://aradhyapavan.github.io/" target="_blank" rel="noopener">Personal website</a></li>
<li><a href="https://github.com/aradhyapavan" target="_blank" rel="noopener">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row g-3 mt-1">
<div class="col-12">
<div class="card bg-body-secondary border-0">
<div class="card-body py-3">
<div class="fw-semibold mb-1"><i class="fa-solid fa-star me-2"></i>Features</div>
<ul class="mb-0 small">
<li>Rich Markdown editor toolbar (headings, lists, tables, code, images, links)</li>
<li>Live preview with GitHub-style rendering</li>
<li>KaTeX math typesetting and Mermaid diagrams (sequence, flow, gantt)</li>
<li>Exports: Markdown (.md), HTML (raw), HTML (with styles), and PDF</li>
<li>Read mode for distraction-free full-page preview</li>
<li>Dark/Light themes with persistent preference</li>
<li>Editable file name in navbar; used in exports</li>
<li>Sample templates (README, Math Notes, API Docs, Meeting Notes)</li>
<li>Import Markdown or HTML files</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="pdfOptionsModal" tabindex="-1" aria-labelledby="pdfOptionsLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pdfOptionsLabel"><i class="fa-solid fa-file-pdf me-2"></i>PDF Export Options</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-semibold">Page Orientation</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="orientation" id="portrait" value="portrait" checked>
<label class="form-check-label" for="portrait">
<i class="fa-solid fa-arrow-down me-2"></i>Portrait
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="orientation" id="landscape" value="landscape">
<label class="form-check-label" for="landscape">
<i class="fa-solid fa-arrow-right me-2"></i>Landscape
</label>
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Paper Size</label>
<select class="form-select" id="paperSize">
<option value="a4">A4 (210 × 297 mm)</option>
<option value="letter">Letter (8.5 × 11 in)</option>
<option value="legal">Legal (8.5 × 14 in)</option>
<option value="a3">A3 (297 × 420 mm)</option>
<option value="a5">A5 (148 × 210 mm)</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="btn-generate-pdf">Generate PDF</button>
</div>
</div>
</div>
</div>
<input type="file" id="file-md" accept=".md,.markdown,.txt" hidden>
<input type="file" id="file-html" accept=".html,.htm" hidden>
<div class="modal fade" id="samplesModal" tabindex="-1" aria-labelledby="samplesLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-body">
<div class="modal-header">
<h5 class="modal-title" id="samplesLabel"><i class="fa-solid fa-wand-magic-sparkles me-2"></i>Insert Markdown Samples</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="list-group">
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">Full Cheat Sheet</div>
<div class="text-muted small">Headings, emphasis, lists, tables, code, tasks, links, images, quotes, rules.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="cheatsheet">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="cheatsheet">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">Email Template</div>
<div class="text-muted small">Professional email with bullet lists and signature.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="email">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="email">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">README Starter</div>
<div class="text-muted small">Project badges, install, usage, features, license.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="readme">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="readme">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">Pro GitHub README</div>
<div class="text-muted small">Badges, stack table, structure tree, CLI, Mermaid diagram.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="github_readme_pro">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="github_readme_pro">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">Math Notes</div>
<div class="text-muted small">KaTeX inline/block formulas with references.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="math_notes">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="math_notes">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">API Docs</div>
<div class="text-muted small">HTTP examples, JSON responses, and error table.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="api_docs">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="api_docs">Append</button>
</div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div>
<div class="fw-semibold">Meeting Notes + Gantt</div>
<div class="text-muted small">Agenda, actions, and Mermaid timeline.</div>
</div>
<div>
<button class="btn btn-outline-primary me-2" data-sample="meeting_notes">Insert (replace)</button>
<button class="btn btn-outline-secondary" data-sample-append="meeting_notes">Append</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="footer-credit-wrap">
<div class="d-flex justify-content-center">
<div class="footer-credit">Designed and Developed by <strong>Aradhya Pavan H S</strong></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>window.FLASK_EXPORT_HTML_URL = "{{ url_for('export_html') }}"; window.FLASK_EXPORT_MD_URL = "{{ url_for('export_md') }}";</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const aboutBtn = document.getElementById('btn-about');
if (aboutBtn) {
const aboutModal = new bootstrap.Modal(document.getElementById('aboutModal'));
aboutBtn.addEventListener('click', () => aboutModal.show());
}
});
</script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</body>
</html>