index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="favicon.svg">

  <!-- Primary SEO -->
  <title>Markdown Renderer — Free Online Markdown Editor with Live Preview</title>
  <meta name="description" content="Free online Markdown editor with live preview, GitHub Flavored Markdown, syntax highlighting, Mermaid diagrams, and dark mode. No sign-up required.">
  <meta name="keywords" content="markdown editor, markdown preview, online markdown, GFM, mermaid diagrams, syntax highlighting, markdown to html, live preview">
  <meta name="author" content="Jimit Dholakia">
  <link rel="canonical" href="https://jimit105.github.io/markdown-renderer/">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://jimit105.github.io/markdown-renderer/">
  <meta property="og:title" content="Markdown Renderer — Free Online Markdown Editor with Live Preview">
  <meta property="og:description" content="Free online Markdown editor with live preview, GitHub Flavored Markdown, syntax highlighting, and Mermaid diagrams. Runs entirely in the browser.">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Markdown Renderer — Free Online Markdown Editor">
  <meta name="twitter:description" content="Free online Markdown editor with live preview, syntax highlighting, and Mermaid diagrams. No server required.">

  <!-- Structured Data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Markdown Renderer",
    "url": "https://jimit105.github.io/markdown-renderer/",
    "description": "Free online Markdown editor with live preview, GitHub Flavored Markdown support, syntax highlighting, and Mermaid diagram rendering.",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Any",
    "featureList": [
      "Live Markdown preview",
      "GitHub Flavored Markdown",
      "Syntax highlighting",
      "Mermaid diagram rendering",
      "Dark mode",
      "Responsive layout"
    ]
  }
  </script>

  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-WH53LYHDLQ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-WH53LYHDLQ');
  </script>

  <!-- Highlight.js Theme CSS (light) -->
  <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">

  <!-- Application Styles -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Toolbar Buttons -->
  <div class="toolbar">
    <button
      id="pdf-btn"
      class="toolbar-btn"
      aria-label="Download as PDF"
      title="Download as PDF"
    >📄</button>
    <button
      id="share-btn"
      class="toolbar-btn"
      aria-label="Share as URL"
      title="Copy shareable link"
    >🔗</button>
    <button
      id="theme-toggle"
      class="toolbar-btn"
      aria-label="Toggle dark mode"
      title="Toggle dark mode"
    >
      <span class="icon-sun">☀️</span>
      <span class="icon-moon">🌙</span>
    </button>
  </div>

  <!-- Share toast notification -->
  <div id="share-toast" class="share-toast" aria-live="polite"></div>

  <main>
    <section class="editor-section">
      <textarea
        id="editor"
        aria-label="Markdown editor"
        placeholder="Type your Markdown here or drag and drop a .md file..."
      ></textarea>
    </section>

    <div class="divider" role="separator" aria-label="Resize divider"></div>

    <section class="preview-section">
      <div
        id="preview"
        class="preview-panel"
        aria-label="Rendered Markdown preview"
        role="region"
      ></div>
    </section>
  </main>

  <!-- lz-string — URL-safe compression for shareable links -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script>

  <!-- marked.js — Markdown parser -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>

  <!-- highlight.js — Syntax highlighting -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

  <!-- Mermaid.js — Diagram rendering -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>

  <!-- Application Script -->
  <script src="app.js"></script>
</body>
</html>