WinnieAPI-v2/public/tools/markdown.html

<!-- ═══════════════ MARKDOWN ═══════════════ -->
<div class="page" id="page-markdown">
  <button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
  <div class="section-header">
    <h2><i class="fab fa-markdown" style="color:var(--accent)"></i> Markdown Preview</h2>
    <p>Write Markdown and see a live preview.</p>
  </div>
  <div class="split-panel">
    <div>
      <div class="panel-label">Markdown</div>
      <textarea id="mdInput" oninput="renderMarkdown()" placeholder="# Hello World&#10;&#10;Write your **markdown** here...&#10;&#10;- Item 1&#10;- Item 2&#10;&#10;`code` and more" style="min-height:400px;"></textarea>
    </div>
    <div>
      <div class="panel-label">Preview</div>
      <div class="md-preview" id="mdPreview"><span style="color:var(--text-muted);">Preview will appear here...</span></div>
    </div>
  </div>
  <div class="api-usage">
    <button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
    <div class="api-usage-body">
      <div class="api-baseurl-note">ℹ️ Markdown Preview runs entirely <strong>client-side</strong> using regex-based rendering. No server API is needed. Here's how to use a similar approach in your own code:</div>
      <div class="api-endpoint">
        <div class="api-desc">Simple Markdown to HTML conversion in JavaScript.</div>
        <div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side Markdown rendering — no API call needed</span>
<span class="kw">function</span> <span class="fn">renderMarkdown</span>(md) {
  <span class="kw">return</span> md
    .<span class="fn">replace</span>(/^### (.+)$/gm, <span class="str">'&lt;h3&gt;$1&lt;/h3&gt;'</span>)
    .<span class="fn">replace</span>(/^## (.+)$/gm, <span class="str">'&lt;h2&gt;$1&lt;/h2&gt;'</span>)
    .<span class="fn">replace</span>(/^# (.+)$/gm, <span class="str">'&lt;h1&gt;$1&lt;/h1&gt;'</span>)
    .<span class="fn">replace</span>(/\*\*(.+?)\*\*/g, <span class="str">'&lt;strong&gt;$1&lt;/strong&gt;'</span>)
    .<span class="fn">replace</span>(/\*(.+?)\*/g, <span class="str">'&lt;em&gt;$1&lt;/em&gt;'</span>)
    .<span class="fn">replace</span>(/`([^`]+)`/g, <span class="str">'&lt;code&gt;$1&lt;/code&gt;'</span>)
    .<span class="fn">replace</span>(/\n\n/g, <span class="str">'&lt;/p&gt;&lt;p&gt;'</span>);
}

<span class="kw">const</span> html = <span class="fn">renderMarkdown</span>(<span class="str">"# Hello\n\n**Bold** and *italic*"</span>);
<span class="cm">// → "&lt;h1&gt;Hello&lt;/h1&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Bold&lt;/strong&gt; and &lt;em&gt;italic&lt;/em&gt;"</span></div>
      </div>
    </div>
  </div>
</div>