winnie/WinnieAPI-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Patrick
2026-05-01 20:02:13 +02:00
commit 75fb753fc0
77 changed files with 4793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/tools/markdown.html
+42
View File
@@ -0,0 +1,42 @@
<!-- ═══════════════ 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>