Spaces:

aradhyapavan
/

markdown-editor

Running

App Files Files Community

aradhyapavan commited on 15 days ago

Commit

b58f685

verified ·

1 Parent(s): f13a2a6

Readme Editor

Browse files

Files changed (12) hide show

app.py +63 -0
requirements.txt +2 -0
static/favicon/android-chrome-192x192.png +0 -0
static/favicon/android-chrome-512x512.png +0 -0
static/favicon/apple-touch-icon.png +0 -0
static/favicon/favicon-16x16.png +0 -0
static/favicon/favicon-32x32.png +0 -0
static/favicon/favicon.ico +0 -0
static/favicon/site.webmanifest +1 -0
static/main.js +511 -0
static/style.css +414 -0
templates/index.html +324 -0

app.py ADDED Viewed

	@@ -0,0 +1,63 @@

+from __future__ import annotations
+import io
+import os
+from flask import Flask, render_template, request, send_file, jsonify
+app = Flask(__name__)
+@app.get("/")
+def index():
+    return render_template("index.html")
+@app.post("/export/md")
+def export_md():
+    content = request.json.get("markdown", "")
+    buf = io.BytesIO(content.encode("utf-8"))
+    return send_file(buf, as_attachment=True, download_name="document.md", mimetype="text/markdown")
+@app.post("/export/html")
+def export_html():
+    html = request.json.get("html", "")
+    with_styles = bool(request.args.get("withStyles", "1") not in ("0", "false", "False"))
+    if with_styles:
+        wrapped = f"""<!DOCTYPE html><html><head>
+            <meta charset='utf-8'>
+            <meta name='viewport' content='width=device-width, initial-scale=1'>
+            <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' 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'>
+            <style> body{{padding:2rem}} </style>
+            </head><body class='markdown-body'>{html}</body></html>"""
+    else:
+        wrapped = html
+    buf = io.BytesIO(wrapped.encode("utf-8"))
+    return send_file(buf, as_attachment=True, download_name="document.html", mimetype="text/html")
+@app.post("/import/html")
+def import_html():
+    file = request.files.get("file")
+    if not file:
+        return jsonify({"error": "No file"}), 400
+    text = file.read().decode("utf-8", errors="ignore")
+    return jsonify({"html": text})
+@app.post("/import/md")
+def import_md():
+    file = request.files.get("file")
+    if not file:
+        return jsonify({"error": "No file"}), 400
+    text = file.read().decode("utf-8", errors="ignore")
+    return jsonify({"markdown": text})
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", "7860"))
+    host = os.environ.get("HOST", "0.0.0.0")
+    app.run(host=host, port=port)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Flask==3.0.3
2	+ gunicorn==23.0.0

static/favicon/android-chrome-192x192.png ADDED Viewed

static/favicon/android-chrome-512x512.png ADDED Viewed

static/favicon/apple-touch-icon.png ADDED Viewed

static/favicon/favicon-16x16.png ADDED Viewed

static/favicon/favicon-32x32.png ADDED Viewed

static/favicon/favicon.ico ADDED Viewed

static/favicon/site.webmanifest ADDED Viewed

	@@ -0,0 +1 @@


1	+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

static/main.js ADDED Viewed

	@@ -0,0 +1,511 @@

+let easyMDE;
+const previewEl = document.getElementById('preview');
+const hljsTheme = document.getElementById('hljs-theme');
+const docTitlePill = document.getElementById('doc-title-pill');
+marked.setOptions({
+  breaks: true,
+  highlight: (code, lang) => {
+    try { return hljs.highlight(code, {language: lang}).value; }
+    catch { return hljs.highlightAuto(code).value; }
+  }
+});
+function renderPreview(md) {
+  const html = marked.parse(md || '');
+  previewEl.innerHTML = `<div class="markdown-body container">${html}</div>`;
+  try { if (window.renderMathInElement) renderMathInElement(previewEl, { delimiters: [
+    {left: '$$', right: '$$', display: true},
+    {left: '$', right: '$', display: false},
+    {left: '\\(', right: '\\)', display: false},
+    {left: '\\[', right: '\\]', display: true}
+  ]}); } catch {}
+  try {
+    if (window.mermaid && !window.__MERMAID_INIT__) {
+      window.__MERMAID_INIT__ = true;
+      mermaid.initialize({ startOnLoad: false, theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default' });
+    }
+    const blocks = previewEl.querySelectorAll('pre code.language-mermaid, code.language-mermaid');
+    blocks.forEach((node, i) => {
+      const src = node.textContent.trim();
+      const container = document.createElement('div');
+      container.className = 'mermaid';
+      container.textContent = src;
+      const pre = node.closest('pre');
+      if (pre) pre.replaceWith(container); else node.replaceWith(container);
+    });
+    if (window.mermaid && previewEl.querySelector('.mermaid')) mermaid.run({ querySelector: '.mermaid' });
+  } catch {}
+}
+function getMarkdown() { return easyMDE ? easyMDE.value() : ''; }
+function setupEditor() {
+  easyMDE = new EasyMDE({
+    element: document.getElementById('editor'),
+    spellChecker: false,
+  autosave: { enabled: true, uniqueId: 'md-editor-autosave', delay: 1000 },
+    previewRender: (plainText) => marked.parse(plainText),
+    toolbar: [
+      { name: 'open', action: () => document.getElementById('btn-import-md').click(), className: 'fa fa-folder-open', title: 'Open Markdown file' },
+      'undo', 'redo', '|',
+      'bold', 'italic', 'heading-1', 'heading-2', 'heading-3', 'table', '|',
+      { name: 'indent', action: (ed) => ed.codemirror.execCommand('indentMore'), className: 'fa fa-indent', title: 'Indent' },
+      { name: 'outdent', action: (ed) => ed.codemirror.execCommand('indentLess'), className: 'fa fa-outdent', title: 'Outdent' },
+      '|', 'unordered-list', 'ordered-list', '|', 'quote', 'code', 'horizontal-rule', '|', 'link', 'image', '|',
+      'preview', 'side-by-side', 'fullscreen', '|',
+      { name: 'clear', action: () => { easyMDE.value(''); renderPreview(''); }, className: 'fa fa-eraser', title: 'Clear' }
+    ],
+  });
+  easyMDE.codemirror.on('change', () => renderPreview(getMarkdown()));
+  const initial = getMarkdown();
+  if (!initial || initial.trim() === '') {
+    const sample = `# Welcome to Markdown Editor!\n\nThis page works like **StackEdit**. Edit on the left, preview on the right.\nIf you want to learn Markdown quickly, read and modify this document.\n\n# Files\n\nYour content is autosaved in your browser and works **offline**.\n\n## Create files and folders\nUse the Samples menu for starters or begin typing.\n\n## Switch to another file\nYou can paste any Markdown content here and it will render instantly.\n\n## Export a file\nUse the Export menu to save as Markdown, raw HTML, styled HTML, or PDF.\n\n# Synchronization\n\nThis demo does not connect to cloud storage, but you can copy/paste to any service.\n\n# Markdown extensions\n\n## Code blocks\n\n\`\`\`python\nprint('Hello, Markdown!')\n\`\`\`\n\n## Tables\n\n| Feature | Status |\n|---|---|\n| Autosave | ✅ |\n| Dark Mode | ✅ |\n| Export | ✅ |\n\n## Blockquotes\n\n> Tips: Use the toolbar to format text, add lists, tables, and more.\n\n## Mermaid diagrams\n\n\`\`\`mermaid\ngraph LR\nA[Write] --> B[Preview]\nB --> C{Export}\nC -->|PDF| D[Share]\nC -->|HTML| E[Publish]\n\`\`\`\n\n---\n\nHappy writing!`;
+    easyMDE.value(sample);
+  }
+  renderPreview(getMarkdown());
+}
+function setupSplit() {
+  if (window.Split) {
+    Split(['#leftPane', '#rightPane'], { sizes: [50, 50], minSize: 280, gutterSize: 8, cursor: 'col-resize' });
+  }
+}
+function pickFile(inputEl, cb) {
+  inputEl.onchange = (e) => { const f = e.target.files[0]; if (f) cb(f); inputEl.value = ''; };
+  inputEl.click();
+}
+function readFileText(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.readAsText(file);
+  });
+}
+function bindActions() {
+  // Theme toggle
+  const themeBtn = document.getElementById('btn-theme');
+  const setDark = (on) => {
+    document.documentElement.classList.toggle('light', !on);
+    document.documentElement.classList.toggle('dark', !!on);
+    if (hljsTheme) {
+      hljsTheme.href = on
+        ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css'
+        : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
+    }
+    try { localStorage.setItem('md-theme-dark', on ? '1' : '0'); } catch {}
+  };
+  try {
+    const saved = localStorage.getItem('md-theme-dark');
+    const initialDark = saved === null ? true : saved === '1';
+    setDark(initialDark);
+    const icon = themeBtn.querySelector('i');
+    if (icon) icon.className = initialDark ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
+  } catch { setDark(true); }
+  themeBtn.addEventListener('click', () => {
+    const isDark = document.documentElement.classList.contains('dark');
+    const nowDark = !isDark;
+    setDark(nowDark);
+    const icon = themeBtn.querySelector('i');
+    if (icon) icon.className = nowDark ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
+  });
+  document.getElementById('btn-import-md').addEventListener('click', () => {
+    pickFile(document.getElementById('file-md'), async (file) => {
+      const text = await readFileText(file);
+      easyMDE.value(text);
+      renderPreview(text);
+    });
+  });
+  document.getElementById('btn-import-html').addEventListener('click', () => {
+    pickFile(document.getElementById('file-html'), async (file) => {
+      const text = await readFileText(file);
+      easyMDE.value(text);
+      renderPreview(text);
+    });
+  });
+  const samplesBtn = document.getElementById('btn-samples');
+  const samplesModal = new bootstrap.Modal(document.getElementById('samplesModal'));
+  samplesBtn.addEventListener('click', () => samplesModal.show());
+  const samples = {
+    cheatsheet: `# Markdown Cheat Sheet\n\n## Headings\n# H1\n## H2\n### H3\n\n## Emphasis\n*italic*  **bold**  ~~strike~~  \`code\`\n\n## Lists\n- unordered\n- list\n  - nested\n1. ordered\n2. list\n\n## Links & Images\n[OpenAI](https://openai.com)  \\n![Image](https://via.placeholder.com/200x80.png?text=Image)\n\n## Blockquote\n> A wise quote.\n\n## Table\n| Name | Role |\n|---|---|\n| Alice | Developer |\n| Bob | Designer |\n\n## Task List\n- [x] design\n- [ ] implement\n- [ ] test\n\n## Code Block\n\`\`\`python\nfrom math import sqrt\nprint(sqrt(9))\n\`\`\`\n\n---\n\n### Horizontal rule above`,
+    email: `**Subject:** Request to Schedule Project Kickoff Meeting\n\nDear [Recipient Name],\n\nI hope you're doing well. I'd like to schedule a 30‑minute kickoff meeting to align on [Project/Topic].\n\n**Proposed agenda:**\n- Objectives and success criteria\n- Scope, timeline, and roles\n- Risks and dependencies\n- Next steps\n\n**Suggested times (IST):**\n- [Option 1, e.g., Tue 3:00–3:30 PM]\n- [Option 2, e.g., Wed 11:00–11:30 AM]\n\nIf these don't work, please share alternative slots and your preferred meeting platform.\n\nThanks in advance, and I look forward to our discussion.\n\nBest regards,\n\n[Your Full Name]\n[Your Role], [Your Company]\nPhone: [Your Phone]\nEmail: you@example.com\n\n---`,
+    readme: `# Project Title\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)  ![Built with](https://img.shields.io/badge/Built%20with-Bootstrap%205-blue)\n\nA short description of your project.\n\n## Features\n- Awesome feature\n- Fast and reliable\n\n## Installation\n\`\`\`bash\npip install -r requirements.txt\npython app.py\n\`\`\`\n\n## Usage\nDescribe how to use it.\n\n## License\nMIT © You`,
+    github_readme_pro: `# Awesome App\n\n[![CI](https://github.com/OWNER/REPO/actions/workflows/ci.yml/badge.svg)](https://github.com/OWNER/REPO/actions) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\n> One‑liner that explains what this project does.\n\n## Table of Contents\n- [Demo](#demo)\n- [Stack](#stack)\n- [Install](#install)\n- [Project Structure](#project-structure)\n- [CLI](#cli)\n- [Docs](#docs)\n\n## Demo\n![screenshot](https://via.placeholder.com/960x320.png?text=Screenshot)\n\n## Stack\n| Layer | Tech |\n|---|---|\n| Frontend | React / Vite |\n| Backend | FastAPI |\n| DB | PostgreSQL |\n| Infra | Docker / GH Actions |\n\n## Install\n\`\`\`bash\n git clone https://github.com/OWNER/REPO && cd REPO\n cp .env.example .env\n docker compose up -d --build\n\`\`\`\n\n## Project Structure\n\`\`\`text\nREPO/\n ├─ apps/\n │  ├─ api/\n │  └─ web/\n ├─ packages/\n │  ├─ ui/\n │  └─ config/\n └─ tools/\n    └─ scripts/\n\`\`\`\n\n## Docs\n### Data Flow (Mermaid)\n\`\`\`mermaid\ngraph TD\nA[Browser] --> B(Edge API)\nB --> C{Auth}\nC -->|pass| D[Service] --> E[(DB)]\nC -->|fail| F[401]\n\`\`\`\n\n## License\nMIT`,
+    math_notes: `# KaTeX Quick Examples\n\nInline: $E=mc^2$, $\\int_0^1 x^2\\,dx = \\tfrac{1}{3}$.\n\nBlock:\n\n$$\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$$\n\nEuler integral for the gamma function:\n\n$$\\Gamma(z)=\\int_0^\\infty t^{z-1}e^{-t}\\,dt$$\n\n> Tip: See more syntax in the MathJax guide.`,
+    api_docs: `# HTTP API\n\n> Version 1\n\n## Authentication\nUse a Bearer token in the Authorization header.\n\n## Endpoints\n### GET /v1/users\nReturns a paginated list of users.\n\n\`\`\`http\nGET /v1/users?page=1&pageSize=20\nAuthorization: Bearer <token>\n\`\`\`\n\nResponse:\n\`\`\`json\n{\n  "items": [{"id": 1, "name": "Ada"}],\n  "nextPage": 2\n}\n\`\`\`\n\n### Errors\n| Code | Meaning |\n|---|---|\n| 400 | Bad request |\n| 401 | Unauthorized |\n| 404 | Not found |`,
+    meeting_notes: `# Meeting Notes\n\n**When**: 2025-08-28 14:00–14:45 IST  \n**Where**: Zoom  \n**Attendees**: Alex, Priya, Sam\n\n## Agenda\n1. Status updates\n2. Release checklist\n3. Risks\n\n## Decisions\n- Ship v1.2 on Monday\n- Freeze new features until post‑release\n\n## Action Items\n- [ ] Alex: finalize docs\n- [ ] Priya: run load tests\n- [ ] Sam: prepare rollout plan\n\n## Timeline\n\`\`\`mermaid\ngantt\n  title Release plan\n  dateFormat  YYYY-MM-DD\n  section Prep\n  Docs        :a1, 2025-08-28, 2d\n  Load tests  :a2, 2025-08-28, 2d\n  section Ship\n  Release     :milestone, 2025-08-30, 1d\n\`\`\``
+  };
+  document.querySelectorAll('[data-sample]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const key = btn.getAttribute('data-sample');
+      easyMDE.value(samples[key] || '');
+      renderPreview(getMarkdown());
+      samplesModal.hide();
+    });
+  });
+  document.querySelectorAll('[data-sample-append]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const key = btn.getAttribute('data-sample-append');
+      const text = samples[key] || '';
+      easyMDE.value((getMarkdown() + '\n\n' + text).trim());
+      renderPreview(getMarkdown());
+      samplesModal.hide();
+    });
+  });
+  document.getElementById('btn-export-md').addEventListener('click', () => {
+    const content = easyMDE.value();
+    const filename = document.getElementById('doc-title-pill').textContent || 'document';
+    const blob = new Blob([content], { type: 'text/markdown' });
+    saveAs(blob, `${filename}.md`);
+  });
+  document.getElementById('btn-export-html').addEventListener('click', () => {
+    const content = easyMDE.value();
+    const html = marked.parse(content);
+    const filename = document.getElementById('doc-title-pill').textContent || 'document';
+    const blob = new Blob([html], { type: 'text/html' });
+    saveAs(blob, `${filename}.html`);
+  });
+  document.getElementById('btn-export-html-styled').addEventListener('click', () => {
+    const content = easyMDE.value();
+    const html = marked.parse(content);
+    const styledHtml = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${document.getElementById('doc-title-pill').textContent || 'Document'}</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@21.0.7/dist/primer.css">
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 2rem; }
+    .markdown-body { color: #24292f; }
+    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { color: #24292f; margin-top: 1.5rem; }
+    .markdown-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
+    .markdown-body th, .markdown-body td { border: 1px solid #d0d7de; padding: 0.5rem; text-align: left; }
+    .markdown-body th { background-color: #f6f8fa; font-weight: 600; }
+    .markdown-body tr:nth-child(even) td { background-color: #fafbfc; }
+    .markdown-body pre { background-color: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; padding: 1rem; overflow-x: auto; }
+    .markdown-body code { background-color: #f6f8fa; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
+    .markdown-body blockquote { border-left: 4px solid #d0d7de; margin: 1rem 0; padding: 0 1rem; color: #6a737d; }
+  </style>
+</head>
+<body>
+  <div class="markdown-body">
+    ${html}
+  </div>
+</body>
+</html>`;
+    const filename = document.getElementById('doc-title-pill').textContent || 'document';
+    const blob = new Blob([styledHtml], { type: 'text/html' });
+    saveAs(blob, `${filename}-styled.html`);
+  });
+  document.getElementById('btn-export-pdf').addEventListener('click', () => {
+    const pdfOptionsModal = new bootstrap.Modal(document.getElementById('pdfOptionsModal'));
+    pdfOptionsModal.show();
+  });
+  document.getElementById('btn-generate-pdf').addEventListener('click', () => {
+    const orientation = document.querySelector('input[name="orientation"]:checked').value;
+    const paperSize = document.getElementById('paperSize').value;
+    const pdfOptionsModal = bootstrap.Modal.getInstance(document.getElementById('pdfOptionsModal'));
+    pdfOptionsModal.hide();
+    generatePDF(orientation, paperSize);
+  });
+  function generatePDF(orientation, paperSize, fullPage) {
+    const content = easyMDE.value();
+    const html = marked.parse(content);
+    const pageBreakStyles = fullPage ? '' : `
+      .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
+        page-break-after: avoid;
+      }
+      .markdown-body table {
+        page-break-inside: avoid;
+      }
+      .markdown-body pre {
+        page-break-inside: avoid;
+      }
+      .markdown-body hr {
+        page-break-after: avoid;
+      }`;
+    const styledHtml = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${document.getElementById('doc-title-pill').textContent || 'Document'}</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@21.0.7/dist/primer.css">
+  <style>
+    /* Force light theme for PDF */
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+      line-height: 1.6;
+      margin: 0;
+      padding: 1rem;
+      color: #24292f !important;
+      background: #ffffff !important;
+    }
+    .markdown-body {
+      color: #24292f !important;
+      background: #ffffff !important;
+    }
+    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
+      color: #24292f !important;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .markdown-body p {
+      color: #24292f !important;
+      margin-bottom: 1rem;
+    }
+    .markdown-body ul, .markdown-body ol {
+      color: #24292f !important;
+      margin-bottom: 1rem;
+    }
+    .markdown-body li {
+      color: #24292f !important;
+      margin-bottom: 0.5rem;
+    }
+    .markdown-body table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 1rem 0;
+      background: #ffffff !important;
+    }
+    .markdown-body th, .markdown-body td {
+      border: 1px solid #d0d7de;
+      padding: 0.5rem;
+      text-align: left;
+      color: #24292f !important;
+      background: #ffffff !important;
+    }
+    .markdown-body th {
+      background-color: #f6f8fa !important;
+      color: #24292f !important;
+      font-weight: 600;
+    }
+    .markdown-body tr:nth-child(even) td {
+      background-color: #fafbfc !important;
+      color: #24292f !important;
+    }
+    .markdown-body pre {
+      background-color: #f6f8fa !important;
+      border: 1px solid #d0d7de;
+      border-radius: 6px;
+      padding: 1rem;
+      overflow-x: auto;
+      color: #24292f !important;
+    }
+    .markdown-body code {
+      background-color: #f6f8fa !important;
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+      font-size: 0.9em;
+      color: #24292f !important;
+    }
+    .markdown-body blockquote {
+      border-left: 4px solid #d0d7de;
+      margin: 1rem 0;
+      padding: 0 1rem;
+      color: #6a737d !important;
+      background-color: #f6f8fa !important;
+    }
+    .markdown-body img {
+      max-width: 100%;
+      height: auto;
+      border: 1px solid #d0d7de;
+    }
+    .markdown-body a {
+      color: #0969da !important;
+      text-decoration: none;
+    }
+    .markdown-body a:hover {
+      text-decoration: underline;
+    }
+    .markdown-body hr {
+      border: 0;
+      border-top: 1px solid #d0d7de;
+      margin: 1.5rem 0;
+    }
+    /* Override any dark theme styles */
+    * { color: inherit !important; }
+    ${pageBreakStyles}
+  </style>
+</head>
+<body>
+  <div class="markdown-body">
+    ${html}
+  </div>
+</body>
+</html>`;
+    const filename = document.getElementById('doc-title-pill').textContent || 'document';
+    if (fullPage) {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = styledHtml;
+      tempDiv.style.position = 'absolute';
+      tempDiv.style.left = '-9999px';
+      tempDiv.style.top = '0';
+      tempDiv.style.width = '800px';
+      tempDiv.style.background = '#ffffff';
+      tempDiv.style.padding = '20px';
+      tempDiv.style.overflow = 'visible';
+      tempDiv.style.fontSize = '14px';
+      tempDiv.style.lineHeight = '1.6';
+      document.body.appendChild(tempDiv);
+      setTimeout(() => {
+        const contentHeight = Math.max(tempDiv.scrollHeight, tempDiv.offsetHeight);
+        console.log('Content height:', contentHeight);
+        document.body.removeChild(tempDiv);
+        const opt = {
+          margin: [0, 0, 0, 0],
+          filename: `${filename}-fullpage.pdf`,
+          image: { type: 'jpeg', quality: 0.98 },
+          html2canvas: {
+            scale: 1,
+            useCORS: true,
+            letterRendering: true,
+            backgroundColor: '#ffffff',
+            width: 800,
+            height: contentHeight,
+            scrollY: 0,
+            scrollX: 0,
+            allowTaint: true,
+            foreignObjectRendering: true
+          },
+          jsPDF: {
+            unit: 'px',
+            format: [800, contentHeight + 40],
+            orientation: 'portrait',
+            compress: true
+          }
+        };
+        html2pdf().from(styledHtml).set(opt).save();
+      }, 300);
+    } else {
+      const opt = {
+        margin: [10, 10, 10, 10],
+        filename: `${filename}.pdf`,
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: {
+          scale: 2,
+          useCORS: true,
+          letterRendering: true,
+          backgroundColor: '#ffffff'
+        },
+        jsPDF: {
+          unit: 'mm',
+          format: paperSize,
+          orientation: orientation
+        }
+      };
+      html2pdf().from(styledHtml).set(opt).save();
+    }
+  }
+  const readBtn = document.getElementById('btn-readmode');
+  if (readBtn) {
+    let readMode = false;
+    readBtn.addEventListener('click', () => {
+      readMode = !readMode;
+      document.body.classList.toggle('read-mode', readMode);
+      const icon = readBtn.querySelector('i');
+      if (icon) icon.className = readMode ? 'fa-solid fa-book' : 'fa-solid fa-book-open';
+      readBtn.textContent = readMode ? ' Exit read mode' : ' Read mode';
+      readBtn.prepend(icon);
+    });
+  }
+  if (docTitlePill) {
+    const savedTitle = localStorage.getItem('md-doc-title') || 'Welcome file';
+    docTitlePill.textContent = savedTitle;
+    docTitlePill.addEventListener('input', () => {
+      const v = (docTitlePill.textContent || '').trim() || 'Untitled';
+      localStorage.setItem('md-doc-title', v);
+    });
+  }
+}
+window.addEventListener('DOMContentLoaded', () => {
+  const ensureCss = (href) => { if (!document.querySelector(`link[href="${href}"]`)) { const l=document.createElement('link'); l.rel='stylesheet'; l.href=href; document.head.appendChild(l);} };
+  const ensureScript = (src, cb) => { if (document.querySelector(`script[src="${src}"]`)) { cb && cb(); return; } const s=document.createElement('script'); s.src=src; s.defer=true; s.onload=() => cb && cb(); document.body.appendChild(s); };
+  ensureCss('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css');
+  ensureScript('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js', () => {
+    ensureScript('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js', () => {
+      try { renderPreview(getMarkdown()); } catch {}
+    });
+  });
+  ensureScript('https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js', () => { try { renderPreview(getMarkdown()); } catch {} });
+  setupEditor();
+  setupSplit();
+  bindActions();
+  const aboutBtn = document.getElementById('btn-about');
+  if (aboutBtn) {
+    const aboutEl = document.getElementById('aboutModal');
+    const aboutModal = new bootstrap.Modal(aboutEl);
+    aboutBtn.addEventListener('click', () => aboutModal.show());
+    aboutEl.addEventListener('hidden.bs.modal', () => {
+      document.body.classList.remove('modal-open');
+      document.body.style.removeProperty('padding-right');
+      document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+    });
+  }
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,414 @@

+/* General */
+:root {
+  --bg: #0f172a;         /* slate-900 */
+  --panel: #0b1220;      /* deep card */
+  --panel-contrast: #0b1220f5;
+  --text: #e2e8f0;       /* slate-200 */
+  --muted: #94a3b8;      /* slate-400 */
+  --border: #1f2937;     /* slate-800 */
+  --accent: #3b82f6;     /* blue-500 */
+  --code-bg: #0b1220;
+  --code-border: #1f2937;
+  --blockquote-bg: rgba(255,255,255,0.03);
+  --toolbar-icon: #e5e7eb;           /* brighter by default in dark */
+  --toolbar-icon-active: #ffffff;    /* bright for active/hover */
+  --toolbar-bg: var(--panel);
+  --toolbar-hover: rgba(255,255,255,0.06);
+  --toolbar-shadow: 0 2px 8px rgba(0,0,0,.25);
+}
+.light {
+  --bg: #f6f8fa;
+  --panel: #ffffff;
+  --panel-contrast: #ffffffcc;
+  --text: #24292f;
+  --muted: #6b7280;
+  --border: #d0d7de;
+  --accent: #2563eb;
+  --code-bg: #f6f8fa;
+  --code-border: #d0d7de;
+  --blockquote-bg: #f8fafc;
+  --toolbar-icon: #1f2937;           /* darker for light bg */
+  --toolbar-icon-active: #111827;
+  --toolbar-bg: #ffffff;
+  --toolbar-hover: rgba(0,0,0,0.06);
+  --toolbar-shadow: 0 2px 10px rgba(0,0,0,.08);
+}
+html, body { height: 100%; }
+body {
+  background: radial-gradient(1200px 800px at 10% -10%, #1f2937 0%, var(--bg) 40%),
+              radial-gradient(800px 600px at 110% 10%, #0b1220 0%, var(--bg) 50%);
+  color: var(--text);
+  font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif;
+}
+.light body { background: var(--bg); }
+/* Editor and preview */
+#preview { background: transparent; }
+.EasyMDEContainer { height: 100%; display: flex; flex-direction: column; }
+.EasyMDEContainer .CodeMirror { flex: 1 1 auto; height: 100% !important; font-size: 0.98rem; background: var(--panel); color: var(--text); }
+/* Enhanced toolbar layout for consistent alignment */
+.editor-toolbar {
+  background: var(--toolbar-bg);
+  border-color: var(--border) !important;
+  border-radius: 12px 12px 0 0;
+  box-shadow: var(--toolbar-shadow);
+  padding: 6px 8px;
+  line-height: 1; /* prevent baseline drift */
+}
+.editor-toolbar a {
+  color: var(--toolbar-icon) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 34px !important;
+  min-width: 34px !important;
+  padding: 0 8px !important;
+  margin: 2px 3px !important;
+  border-radius: 8px !important;
+  transition: background .15s ease, color .15s ease, transform .05s ease;
+  font-size: 1.05rem !important;
+}
+.editor-toolbar a:hover, .editor-toolbar a.active {
+  color: var(--toolbar-icon-active) !important;
+  background: var(--toolbar-hover) !important;
+}
+/* Ensure all icon glyphs inherit the color (FA4 + FA6 + SVGs) */
+.editor-toolbar .fa, .editor-toolbar .fa:before,
+.editor-toolbar svg { color: inherit !important; fill: currentColor !important; }
+.editor-toolbar i.separator { border-color: var(--border) !important; opacity: .7; margin: 0 6px !important; }
+.CodeMirror-cursor { border-left: 2px solid var(--accent) !important; }
+.CodeMirror-gutters { background: var(--panel); border-right: 1px solid var(--border); }
+.cm-s-default .CodeMirror-linenumber { color: var(--muted); }
+/* Make the separators visible in dark */
+.editor-toolbar i.separator { border-color: var(--border) !important; opacity: .7; }
+/* Ensure FA4 icons inherit color properly */
+.editor-toolbar .fa, .editor-toolbar .fa:before { color: inherit; }
+/* make icons aligned */
+.editor-toolbar .fa { width: 18px; text-align: center; }
+.navbar .nav-link, .navbar-brand { color: inherit; }
+.navbar .dropdown-item i { width: 1.25rem; }
+/* Ensure brand has correct color in dark mode and on hover */
+.dark .navbar .navbar-brand { color: #e5e7eb !important; }
+.dark .navbar .navbar-brand:hover { color: #ffffff !important; background: transparent !important; }
+/* Markdown content */
+.markdown-body { max-width: 100%; color: var(--text); line-height: 1.7; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3,
+.markdown-body h4, .markdown-body h5, .markdown-body h6 { color: var(--text); margin-top: 1.25rem; font-weight: 700; }
+.markdown-body p, .markdown-body li { color: var(--text); }
+.markdown-body a { color: var(--accent); text-decoration: none; }
+.markdown-body a:hover { text-decoration: underline; }
+.markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
+.markdown-body blockquote { border-left: 4px solid var(--border); padding: .5rem 1rem; color: var(--muted); background: var(--blockquote-bg); }
+.markdown-body pre, .markdown-body code { background: var(--code-bg); border: 1px solid var(--code-border); color: var(--text); }
+.markdown-body pre { padding: .75rem; border-radius: 8px; overflow: auto; }
+.markdown-body table { border-collapse: collapse; width: 100%; background: var(--panel); }
+/* Stronger specificity to override Bootstrap's .table */
+.markdown-body table th, .markdown-body table td { border: 1px solid var(--border); padding: .6rem .8rem; color: var(--text) !important; opacity: 1 !important; }
+.markdown-body table thead th { color: var(--text) !important; }
+.markdown-body table tbody td { color: var(--text) !important; }
+.markdown-body table tr, .markdown-body table td, .markdown-body table th { filter: none !important; }
+.markdown-body table th { background: #1b2433; color: #e2e8f0 !important; font-weight: 600; }
+/* Dark mode body cell backgrounds for contrast */
+.markdown-body table td { background: rgba(255,255,255,0.065); }
+.markdown-body tr:nth-child(even) td { background: rgba(255,255,255,0.06); }
+.markdown-body tr:hover td { background: rgba(59,130,246,0.12); }
+.light .markdown-body th { background: #f0f3f6; color: #24292f; }
+.light .markdown-body tr:nth-child(even) td { background: #fafbfc; }
+#preview img { max-width: 100%; height: auto; }
+/* Hard overrides for dark-mode table inside preview to defeat any framework table styles */
+.dark #preview .markdown-body table { background: var(--panel) !important; border-color: var(--border) !important; }
+.dark #preview .markdown-body table td,
+.dark #preview .markdown-body table th {
+  color: var(--text) !important;
+  border-color: var(--border) !important;
+  opacity: 1 !important;
+  filter: none !important;
+}
+.dark #preview .markdown-body table td { background-color: rgba(255,255,255,0.07) !important; }
+.dark #preview .markdown-body tr:nth-child(even) td { background-color: rgba(255,255,255,0.1) !important; }
+.dark #preview .markdown-body tr:hover td { background-color: rgba(59,130,246,0.18) !important; }
+/* Force bright text for all table content in dark mode */
+.dark .markdown-body table,
+.dark .markdown-body table * {
+  color: var(--text) !important;
+  opacity: 1 !important;
+}
+/* Extra specificity for body cells and their content */
+.dark .markdown-body table td,
+.dark .markdown-body table td * { color: var(--text) !important; }
+/* Max specificity hammer for stubborn overrides */
+.dark #preview .markdown-body table tbody td,
+.dark #preview .markdown-body table tbody td * {
+  color: #e5e7eb !important;
+  opacity: 1 !important;
+}
+/* Utility */
+button.nav-link { cursor: pointer; }
+/* Modern shell */
+.app-header {
+  backdrop-filter: blur(12px);
+  background: linear-gradient(180deg, var(--panel-contrast), transparent);
+  border-bottom: 1px solid var(--border);
+}
+.modal-open .app-header { backdrop-filter: none !important; background: var(--panel) !important; }
+.app-shell { min-height: calc(100vh - 64px); }
+.pane { display: flex; flex-direction: column; min-width: 0; }
+.card-pane {
+  background: linear-gradient(180deg, var(--panel), var(--panel));
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
+}
+.light .card-pane { box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6); }
+.pane-header {
+  padding: .75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+}
+.pane-header .text-muted { color: var(--muted) !important; }
+/* List group harmonization in modal */
+.list-group-item { background: var(--panel); color: var(--text); border-color: var(--border); }
+.modal-content.bg-body { background: var(--panel); color: var(--text); border-color: var(--border); }
+/* Theme toggle */
+.form-switch .form-check-input { cursor: pointer; }
+/* Slightly lighter CodeMirror caret & line-height for readability */
+.EasyMDEContainer .CodeMirror { line-height: 1.55; }
+/* Toolbar can wrap into multiple rows (left-aligned) */
+.editor-toolbar {
+  display: flex !important;
+  flex-wrap: wrap !important;   /* allow wrapping */
+  align-items: center !important;
+  white-space: normal !important;
+  overflow: visible !important; /* no horizontal scrollbar */
+  text-align: left !important;
+  gap: 2px 4px;                 /* spacing between rows/items */
+}
+.editor-toolbar a, .editor-toolbar i.separator {
+  display: inline-flex !important;
+  flex: 0 0 auto !important;
+  vertical-align: middle !important;
+}
+/* Keep table icon aligned */
+.editor-toolbar .fa-table { line-height: 1 !important; font-size: 1.05rem !important; }
+/* Fix Bootstrap conflict: EasyMDE 'table' toolbar button should not take full width */
+.editor-toolbar a.table,
+.editor-toolbar button.table {
+  display: inline-flex !important;
+  width: auto !important;
+  min-width: 0 !important;
+  height: 34px !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 2px 3px !important;
+  padding: 0 8px !important;
+}
+/* Ensure navbar dropdown overlays editor panes */
+.navbar { position: relative; z-index: 1500; }
+.dropdown-menu { z-index: 2000; }
+/* Force FA6 icons to render in dropdown */
+.dropdown-menu .fa, .dropdown-menu .fa-solid, .dropdown-menu i.fa-solid {
+  font-family: "Font Awesome 6 Free" !important;
+  font-weight: 900 !important;
+  display: inline-block;
+  width: 1.25rem;
+  text-align: center;
+}
+/* Also ensure icon color follows text */
+.dropdown-menu i { color: inherit; }
+/* Dropdown theming */
+.dropdown-menu { border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
+.dropdown-menu .dropdown-item { padding: .6rem .9rem; display: flex; align-items: center; gap: .6rem; }
+.dropdown-menu .dropdown-item i { width: 1.1rem; text-align: center; }
+.dark .dropdown-menu { background: #0f172a; color: #e5e7eb; border-color: #1f2937; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
+.dark .dropdown-menu .dropdown-item { color: #e5e7eb; }
+.dark .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
+/* caret contrast */
+.dropdown-menu::before { border-bottom-color: var(--border); }
+/* Dark mode overrides to make toolbar icons white */
+.dark .editor-toolbar a { color: #ffffff !important; }
+.dark .editor-toolbar a:hover, .dark .editor-toolbar a.active { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; }
+.dark .editor-toolbar .fa, .dark .editor-toolbar .fa:before, .dark .editor-toolbar svg { color: #ffffff !important; fill: #ffffff !important; }
+/* Dark mode toolbar hover/focus */
+.dark .editor-toolbar a:hover,
+.dark .editor-toolbar a:focus,
+.dark .editor-toolbar a.active {
+  background: rgba(255,255,255,0.18) !important;
+  outline: none !important;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25) !important;
+}
+.dark .editor-toolbar a:focus-visible {
+  box-shadow: inset 0 0 0 2px #60a5fa !important; /* blue ring for keyboard focus */
+}
+/* Dark mode toolbar buttons - unified look */
+.dark .editor-toolbar a,
+.dark .editor-toolbar button {
+  color: #ffffff !important;
+  border-radius: 8px !important;
+  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
+}
+/* Softer hover/active (no solid white block) */
+.dark .editor-toolbar a:hover,
+.dark .editor-toolbar button:hover,
+.dark .editor-toolbar a.active,
+.dark .editor-toolbar button.active {
+  background: rgba(255,255,255,0.12) !important;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18) !important;
+}
+/* Remove any default white background from library styles */
+.dark .editor-toolbar a:hover *,
+.dark .editor-toolbar button:hover * { background: transparent !important; }
+/* Navbar icons ensure FA6 solid */
+.navbar .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
+/* Document title input */
+.doc-title-input { width: 220px; background: transparent; color: var(--text); border-color: var(--border); }
+.doc-title-input::placeholder { color: var(--muted); }
+.dark .doc-title-input { background: rgba(255,255,255,0.06); color: #e5e7eb; border-color: #374151; }
+.dark .doc-title-input:focus { background: rgba(255,255,255,0.09); color: #fff; }
+/* Navbar button alignment */
+.navbar .nav-link,
+.navbar .dropdown-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+.navbar .nav-link i,
+.navbar .dropdown-toggle i { color: inherit; }
+/* Light hover */
+.navbar .nav-link:hover,
+.navbar .dropdown-toggle:hover { background: rgba(0,0,0,0.06); }
+/* Dark hover */
+.dark .navbar .nav-link,
+.dark .navbar .dropdown-toggle { color: #e5e7eb; }
+.dark .navbar .nav-link:hover,
+.dark .navbar .dropdown-toggle:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
+/* Ensure export caret/icon position */
+.navbar .dropdown-toggle::after { margin-left: 6px; }
+.doc-title-pill {
+  display: inline-block;
+  max-width: 360px;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+  border: 1px solid var(--border);
+  color: var(--text);
+  cursor: text;
+}
+.doc-title-pill:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
+.dark .doc-title-pill { background: rgba(255,255,255,0.06); border-color: #374151; color: #e5e7eb; }
+/* Theme button */
+#btn-theme { display: inline-flex; align-items: center; gap: 6px; }
+.dark #btn-theme { color: #e5e7eb; }
+.dark #btn-theme:hover { background: rgba(255,255,255,0.12); border-radius: 8px; }
+/* Prevent dropdown text cutoff and hide arrow caret */
+.dropdown-menu { min-width: 260px; }
+.dropdown-menu .dropdown-item { white-space: nowrap; }
+.dropdown-menu::before, .dropdown-menu::after { display: none !important; }
+/* Read mode helper: smooth layout change */
+#leftPane, #rightPane { transition: all .2s ease; }
+/* Read mode: preview full page, hide editor */
+.read-mode .app-header { position: sticky; top: 0; z-index: 1500; }
+.read-mode #leftPane { display: none !important; }
+.read-mode #rightPane { width: 100% !important; flex: 1 1 auto; }
+.read-mode #rightPane[class*="col-"] { float: none; max-width: 100%; }
+/* Expand row height in read mode */
+.read-mode .app-shell .row { height: calc(100vh - 72px) !important; }
+/* Footer behavior: normal flow in default; fixed at bottom in read mode */
+.read-mode .footer-credit-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  z-index: 1500;
+}
+.read-mode .footer-credit-wrap .footer-credit {
+  background: rgba(0,0,0,0.8);
+  color: #ffffff;
+  border: 1px solid rgba(255,255,255,0.2);
+}
+.read-mode .footer-credit-wrap .footer-credit { pointer-events: auto; }
+/* Samples modal theming */
+#samplesModal .modal-content { border: 1px solid var(--border); }
+#samplesModal .list-group-item { background: var(--panel); color: var(--text); border-color: var(--border); }
+#samplesModal .list-group-item .fw-semibold { color: var(--text); }
+#samplesModal .text-muted { color: var(--muted) !important; }
+#samplesModal .btn.btn-outline-primary { color: var(--text); border-color: var(--border); }
+#samplesModal .btn.btn-outline-primary:hover { background: var(--toolbar-hover); color: var(--text); }
+#samplesModal .btn.btn-outline-secondary { color: var(--text); border-color: var(--border); }
+#samplesModal .btn.btn-outline-secondary:hover { background: var(--toolbar-hover); color: var(--text); }
+/* Light mode hover contrast */
+.light #samplesModal .btn:hover { background: rgba(0,0,0,0.06); }
+/* Global modal dark-mode fixes */
+.dark .modal-content { background: var(--panel); color: var(--text); border-color: var(--border); }
+.dark .modal-header, .dark .modal-footer { border-color: var(--border); }
+.dark .modal-title { color: var(--text); }
+.dark .btn-close { filter: invert(1) opacity(0.8); }
+.dark .modal .btn-outline-primary, .dark .modal .btn-outline-secondary { color: var(--text); border-color: var(--border); }
+.dark .modal .btn-outline-primary:hover, .dark .modal .btn-outline-secondary:hover { background: var(--toolbar-hover); color: #fff; }
+/* About modal cards and links */
+.dark .modal .card.bg-body-secondary { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); }
+.dark .modal .card.bg-body-secondary * { color: var(--text) !important; }
+.dark .modal a { color: var(--accent); }
+.dark .modal a:hover { text-decoration: underline; }
+/* About modal: ensure strong contrast in dark mode */
+.dark #aboutModal .modal-content { background: var(--panel); color: var(--text); border-color: var(--border); }
+.dark #aboutModal .modal-header, .dark #aboutModal .modal-footer { border-color: var(--border); }
+.dark #aboutModal .modal-title { color: var(--text); }
+.dark #aboutModal .modal-body p,
+.dark #aboutModal .modal-body li,
+.dark #aboutModal .modal-body .fw-semibold { color: var(--text) !important; }
+.dark #aboutModal .card { background: rgba(255,255,255,0.07) !important; border: 1px solid var(--border) !important; }
+.dark #aboutModal .card * { color: var(--text) !important; }
+.dark #aboutModal a { color: var(--accent) !important; }
+.dark #aboutModal a:hover { text-decoration: underline; }
+/* Footer credit box */
+.footer-credit {
+  padding: 10px 18px;
+  border-radius: 14px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(59,130,246,0.15));
+  color: #1f2937;
+  font-weight: 600;
+  box-shadow: 0 6px 18px rgba(0,0,0,.12);
+  border: 1px solid rgba(0,0,0,0.06);
+}
+.dark .footer-credit {
+  background: linear-gradient(90deg, rgba(17,24,39,0.9), rgba(59,130,246,0.25));
+  color: #e5e7eb;
+  border-color: rgba(255,255,255,0.08);
+}
+.footer-credit-wrap { padding: 16px 0 24px 0; }
+.read-mode .footer-credit-wrap { display: none !important; }

templates/index.html ADDED Viewed

	@@ -0,0 +1,324 @@

+{% 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>